Shadcn UI Penpot Version

Hi all,
I’m working on a Penpot version of Shadcn/ui using the new Design Tokens and wanted to share the work-in-progress file here for feedback. It’s still very early.

@shadcn_ui - Design System (1).penpot (17.1 MB)

Any suggestions? Is this something that would be useful?

It’s using Lucide icons and has the Tailwind kit, but it does not really use it yet.

8 Likes

Cool, look forward to seeing the end result :grinning_face:
I personally like their design too, minimalist yet somewhere stylish.

Had a quick look at their site and saw the following in their selection menu.
Namely the same kit as what you are creating now for Penpot , but then for Figma on their site.
Once it is finished, could you possibly contact the owner to add your file for Penpot?
Don’t suspect Penpot will have a problem with this, rather the opposite…

2 questions, is it just the design or also the code behind it?
See e.g. Tooltip - shadcn/ui
design


code

And what style will you use? New York and/or standard?
Personally, my preference is already New York from view but you choose.

1 Like

Hi,
Thank you!

For one, yes, I will add it to the Shadcn site.

It will be just the design as the code implementation is available from Shadcn, and Penpot can generate basic HTML/CSS from the design files.

For the themes:
I have already implemented the default New York neutral theme.

The plan is to have all the themes that come with the CLI available: neutral, slate, stone, zinc, and gray. Neutral is done with its dark theme, too.

Then, the base/atomic/primitive components will be available.
And finally, all the rest of the components.

After that, I will reassess and see whether we need the blocks and charts.

3 Likes

This is already looking so great! Love the way you’ve utilised design tokens so far.

2 Likes

Thank you!
Can’t wait for variant support to drop.

1 Like