I’ve been struggling with importing any good component library like “ShadCN” or “RadiX” or anything that’s available for free and is open source in Penpot and I think this is the biggest reason why people like me might hesistate to make a switch. And there are a lot of my kind of people.
I want to use Penpot but I think I can’t because it doesn’t suit well for my useful, I’m an indie dev who don’t want to spend time designing UI from scratch.
What do I propose? I’m not sure how easy for someone to port their component library to .penpot extension, but if we can make this easier or maybe create an open source extension for component libraries then I think nothing can stop devs like me make a switch.
PS: I’m interested in contributing to that. So hit me up if it sounds exciting to you?
As @BDV already pointed out, while we may not have the exact pinpoint solution you’re looking for, we do have plenty of ways to help you build your own playground and get things going faster. Another addition could be our own design system, Pencil.
We can certainly try and invest more time into making Penpot’s own design system Pencil more applicable and demonstrate ways to get things going.
Had a look at the Pencil library file you recommended.
On think the last page is a dump of used icons in Penpot, would it be possible to store the icons in a GitHub repo as e.g. done here? GitHub - zendeskgarden/svg-icons: 🔍 garden SVG icons
The advantage by using this is that you can easily create an npm file. In the case above, this is: npm install @zendeskgarden/svg-icons
The package contains a src folder with individual SVG icons along with a combined ‘spritemap’ dist of SVG symbols.
Additionally, the Penpot icons if on GitHub can be added relatively easily to Iconify (of which there is a Plugin for Penpot).
Hi @medetcan, thanks for your inputs. Is there a way or documentation which I can follow to convert open source UI component libraries to be available in Penpot format? That will be closest solution which I’m looking for. I understand that Pencil is an alternative, but I’d still prefer to bring my own UI component library to Penpot because it gives unmatched variations which I can create using any UI library available out there.
Also, as @BDV pointed out, availability of npm package for the component library which is used for creating designs is what is expected most of the time. If we can build Pencil into npm package, then I’m happy to give it a go.
Personally I agree. Snappiness is the basis of… almost everything. Yes, plugins, community libraries, shared resources, feature functions such as with component states and everything else - these are all things holding Penpot back, but performance is seriously the one thing that’s setting things apart - to be more specific, setting Figma and Penpot apart. This can also be used to explain why XD, while already in maintenance mode for a long time, still has a considerable number of users.
You can find all the icons at this storybook page. If you can’t scroll the list, it’s because we still haven’t deployed the fix that we’re working on for this small issue. However, Penpot’s storybook is still in an early state and we cannot ensure that the URL won’t change in the near future.
If you’re looking for a more stable source of truth, you can use the ones from the core repository:
True scrolling doesn’t work, neither in Chrome nor Firefox.
Besides I don’t really see the point of the storybook as I can’t select or download/export icons.
TBH in my opinion, these are no added value, e.g. the icons are not in SVG or PNG or ICO or … format
So don’t know how to use these or how this can ever be made into an npm package in the future…
Hey, thanks for the suggestion! I think having icons released in a npm package (probably with React versions as well) would be fantastic, but as you can see in our Not a Roadmap 2025 our hands are a bit full .
I think it could be a sweet project to be tackled by the community, though! Would you be up for this? Or maybe post a message to see if anybody else could do this? If you have technical questions, just let me know.
Hi @ladybenko, I’m interested in taking ideas discussed in this thread forward. Starting with bundling icons in npm package.
I have very minimal experience with clojure tho, so it might take some time for me to get going with this.
Would be great if you can help me in getting started with this? I’m building the whole penpot project right now, are there any specific parts which I don’t need?
Also @BDV, since you bought up this npm package idea, would you be contributing in it too? Technically or non-technically
@shark see below topic and what programming language do you have experience with?
For the moment only non-tech, I’m focussing on the Penpot Plugin Examples for now See
In the backend it is the intention to use Pyramid coding is Python based.
For the frontend I can choose between JavaScript, Angular or React.
For now, I have chosen React but should you have a different preference, I can possibly change my mind.
Personally, I think it would be easiest to build a plugin to interact with the Penpot environment that way, possibly based on the example I am creating.
Should the application be made in multiple languages, GitLocalize seems to me the easiest to use. And its open source.
.