A complete shadcn component library rebuilt natively in Penpot. Every component is assembled from real variant properties, and every colour, radius and type step is bound to a design token rather than typed in by hand.
This version tracks shadcn/ui v4 and Tailwind v4. It ships with 611 tokens across five sets and two colour themes, and a Tabler icon page holding the full 5,130-icon outline set.
Built to be used, not just looked at
Most pages in this file follow the same shape: a Components frame holding the full variant matrix, and an examples frame showing the component doing real work. The first answers what a component can do; the second answers how it should look once it is doing it. Thirteen pages stop at the first, where a usage example would only repeat the matrix.
What you get
The kit mirrors the shadcn component set, so anything you assemble here maps onto the code your team already writes. In practice that means:
One source of truth. Colours, spacing, radii and type steps are tokens, so a change lands on every component at once instead of in the files someone remembered to open.
Real variants. Components use Penpot variant properties rather than duplicated boards, so switching a state is one dropdown, not a hunt through the layer tree.
Honest states. Hover, focus, disabled and invalid are drawn for every control that has them, including the ones that are easy to skip.
Composable parts. Larger components are built from smaller published ones - a table cell holds a real badge, a sidebar row holds a real switch - the same way the code composes.
Light and dark. Both themes are defined at token level and switch across the whole file, so neither one drifts from the other.
The result is a file a designer can work in and a developer can read without translating anything first.
How the kit grows
Components land page by page rather than all at once, and each one is checked against the source before it ships. Where Penpot cannot do what the source does, the difference is written down on that component's page instead of being quietly smoothed over. Three habits keep that honest:
Build notes. Every page records what was built, what deviates from the source, and why - including the deviations nobody would notice.
Known gaps. Anything still pending is written down rather than left to memory, so a half-finished page never looks finished.
Naming that survives. Components and tokens are named for their role, not their look, so a restyle does not turn every name into a lie.
Where to look first
A few places worth opening before anything else:
Style Guide. The five token sets, both themes, and the full colour and type scale on one page.
Component pages. Each one names its variant axes up front, so you can see a component's whole surface without clicking through it.
Tabler Icons. The complete outline set, already imported and sized, so an icon is never a reason to leave the file.
Examples frames. Where a component is shown in context - a settings row, a data table, a docs sidebar - rather than on its own.