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.

16 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.

2 Likes

Any updates on this by any chance? (=

Really look forward using this.

3 Likes

Hi,
I appreciate your interest!

I had to take a break from it, but expect updates within the next week!

4 Likes

Hey,
I’d like to continu the project with you if that could interest you.

It would be a great way for me to put my hand on PenPot and explore all the features and especially the Token Side !

2 Likes

I’m ready to contribute to your work… what’s the current status ?

1 Like

Hi,
Thanks for the interest. I had sort of left it, waiting for the tooling to catch up, and I went back to it. I used the MCP server to try to automate it.

I will link the file progress as of now. There are no variants because I forgot to correct the previous components that I had made before Variants became available. It has about 20 components. I will add the rest, then go back and try to fix the Variants situation since MCP does not expose a way to do that, as far as I can tell.

It seems the file is too big to add here - let me instead share the status update claude helped me make:

shadcn/ui for Penpot — Community Release
Status: Work in Progress · March 2026

────────────────────────────────────────

WHAT’S IN THIS FILE

A Penpot-native shadcn/ui design system built with design tokens,
auto-layout, and Penpot’s component system (v2). Includes the
Lucide icon set as a shared library. This is a real working system
— not a mockup of a mockup. Use it.

────────────────────────────────────────

:white_check_mark: READY (22)

Accordion · Alert · Badge · Button · Card · Checkbox · Dialog ·
Input · Kbd · Label · Popover · Radio · Select · Separator ·
Sidebar · Skeleton · Slider · Spinner · Switch · Tabs · Textarea · Toggle

────────────────────────────────────────

:construction: IN PROGRESS (24)

Alert Dialog · Avatar · Breadcrumb · Button Group · Calendar ·
Carousel · Collapsible · Combobox · Dropdown Menu · Drawer ·
Hover Card · Input Group · Input OTP · Menubar · Navigation Menu ·
Pagination · Progress · Scroll Area · Sheet · Sonner/Toast ·
Table · Toggle Group · Tooltip · Typography

────────────────────────────────────────

:warning: KNOWN GAP: VARIANTS

Components were started before Penpot supported variants. The
structure is correct (components/v2) but states like default /
destructive / outline exist as sibling components rather than
variant properties. Retrofitting is planned — blocked on MCP
variant support. All states exist, just not yet grouped.

────────────────────────────────────────

:prohibited: INTENTIONALLY EXCLUDED

Code-only or logic-heavy components with no meaningful design
representation: Chart · Command · Data Table · Date Picker ·
Direction · Empty · Field · Item · Native Select · Resizable

────────────────────────────────────────

1 Like