The highest quality shadcn/ui design system
A Figma library designers actually want to work in, backed by the exact same components in code.
Why the Obra shadcn/ui kit?
Built for serious product teams who need to get work done
- Accurately recreates all shadcn/ui components in all 8 shadcn styles
- Meticulously crafted by Figma experts. Deep usage of Figma features for maintainability, such as component properties and slots
- All Tailwind 4.2 colors and 1800+ Lucide icons. Easily change icon sets with our shadcn/ui Create plugin.
- Light & dark mode with deep theming support (including multi-brand support)
- Consistent use of auto layout and variables across the board
- We work hard to keep things simple. Our core variable structure has less than 300 variables.
- Export your designed theme with our CSS export plugin
- Design Pro Blocks — a starting point in 3 categories (marketing, e-commerce, and application) that adapts to your theming choices
- React Pro Blocks — accurate code representations of the Pro Blocks, published as a shadcn/ui registry, to give developers a base to work from
- All components beautifully documented with Autodocs
Testimonials
What the community is saying
Obra keeps coming up with these smart projects to promote themselves like the kit. But actually it is really really good, we use it in our startup project ourselves.
Valentijn Kint
This is an awesome work! Thank you so much.
조세영
Thank you for the great kit!
Ali Shouman
Thanks for your amazing work!
Nicolas Fiascaro
This is the highest quality kit I've found and I've evaluated more than five of them on Community.
Anonymous design lead
News
Stay up to date
Latest blog posts
Obra shadcn/ui 2.0: All shadcn styles, Chat components, updated Community file
August 10th, 2026
50,000 duplicates on Figma Community
July 17th, 2026
Help map a few icons, and you have a real shot at winning the kit
June 17th, 2026
Latest videos
Obra shadcn/ui 2.0 — Community vs Pro
August 10, 2026
Obra shadcn/ui Pro 1.13.0 demo — the Rhea style
June 1, 2026
Obra shadcn/ui Pro 1.11.0 demo — the Nova style
May 20, 2026
Newsletter
Subscribe to receive new blog posts directly in your inbox when they're published.
Subscribe nowServices by Obra Studio
Shadcn/ui kit customization
Kickstart your design system with help from Obra Studio, a design agency specialized in shadcn/ui. We can craft a fully customized version of the Obra shadcn/ui kit that matches your brand.
FAQ
This Figma kit is intended to be published as a library, after which the tokens and components would be used in another file. It can be used to create a UI design that is based on shadcn/ui.
Go to the assets panel and click the book icon to open the Manage Libraries dialog. From there, select Publish to make the file available to add as a library in other files.
In the consuming file, go to Manage Libraries as well, but now visit the Teams section. Find the published library and click add to file.
There are two editions of the Obra shadcn/ui kit.
The Community Edition is free and available on Figma Community.
The Pro Edition is a commercial edition with additional components, Pro Blocks, and dedicated support, available through Obra shadcn/ui Pro.
Follow our blog and changelog for the latest updates. You can also subscribe to our newsletter to get new posts delivered to your inbox.