An attempt to a Shadcn UI Library for Penpot

[brunobezerra]

I know that there’s already a topic from @FatumaA regarding a shadcn ui library for Penpot, but I’d like to show you a bit of my efforts to build and hopeffuly release something similar.

I’ve been thinking about it for a really long time now, but this development started just recently, and it’s not available anywhere yet. I hope I can continue developing it and realease an alpha or beta version of this library? Maybe with just the design tokens would already be enough for the community as a start?

Drop your comments with your thoughts.

Thanks in advance!

Also I’d like to point this to Penpot team… I wouldn’t say it’s a bug, I’d say maybe you’d never expect someone to have these much themes

[brunobezerra]

Okay so, I worked a little more on this design file and I think things are going well so far.

To be honest, I’m having quite some fun working on this file!

I might take a longer time showing any news 'cause I’m doing this out of my office work hours, so… You understand.

Thanks in advance!

[LauraKalbag]

This looks like amazing work, @brunobezerra!

[brunobezerra]

Hello everyone! Here are some updates from the project so far.

I guess I’ll soon be releasing an alpha version here at this thread very soon, when I ge to to have more components added, before I submit this project to Penpot Library.

Hope you’re liking the screenhots so far! And questions and feedbacks are always welcome!

[zoney]

stoked!! bruno is the man!!

[brunobezerra]

ShadcnUI 4 Penpot — Early Access (v0.3.0-alpha)

Hey Penpot community

I’m excited to share the first public release of ShadcnUI 4 Penpot — an open design system that replicates shadcn/ui natively in Penpot, built token-first using the W3C Design Tokens standard.

The goal is simple: bring shadcn/ui’s architecture — its tokens, themes, and component library — fully into Penpot, so designers can work with the same design language that shadcn/ui developers use in code.

---

What’s in this release

The file ships with three layers already built:

Token system — Full Tailwind v4 primitive scales, a semantic token layer with 27 tokens per mode (light and dark), and 42 themes total including 20 accent color variations — all structured following the W3C Design Tokens standard and ready to use with Tokens Studio.

Atomic components — Button (5 variants × 3 sizes), Badge, Input, Label, Separator, IconButton, and icon-enhanced versions of Button, Badge, and Input.

Form controls — Checkbox, Radio, Switch, Textarea, and Select — each as a standalone atomic control and as a fully composed Field atom with Label, Helper text, and Error message built in.

---

This is an early access release and there are rough edges worth knowing about.

Coming next: Card, Avatar, Alert, and Tabs in v0.4.0-alpha.

---

Why share it now

I’m releasing at this stage specifically to collect community feedback. If you use shadcn/ui in your workflow and want a Penpot design system that mirrors it closely, I’d love to hear what’s working, what’s missing, and what should be prioritized next.

The file is open — feel free to duplicate it, explore the token structure, and leave your thoughts here.

Thanks for checking it out

Shadcn4Penpot (Google Drive link)
I had to upload in Google Drive since the .penpot file was larger than the supported to attach in this conversation.

[findut]

Thanx!!! The library seems well made and looks great. Unfortunately, Penpot’s structural override issues make it unusable; every time I change an element’s variant, all styles are lost, and I’d have to waste fifteen minutes each time randomly switching back and forth between variants, hoping it snaps back to the desired style.
For now, this problem, together with export performance, makes Penpot unusable for professional work, at least for me.
Obviously, since I’m in love with this tool, I’ll keep trying it and wait for these issues to be gradually resolved and for it to evolve.