The highest quality shadcn/ui Figma library to design and theme your projects
Obra shadcn/ui Pro is a library for working designers, that contains high quality components built to the highest standards.
Features
Pixel-Perfect Components
Every shadcn/ui component accurately recreated in Figma with deep usage of component properties and slots.
Deep Theming
Customize colors, typography, spacing, border radii and shadows using Figma variable modes — including multi-brand support.
Dark & Light Mode
Full dark and light mode support through semantic color variables, with multi-brand theming built in.
Pro Blocks
Copy-pasteable examples across marketing, e-commerce, and application UI — fully built with shadcn/ui variables.
1800+ Icons & All Tailwind Colors
All Lucide icons and every Tailwind 4.2 color included.
Included
Pro Blocks
Get your work done faster with Pro Blocks across 3 categories. Here's a preview — the kit includes many more blocks ready to use.
What's next
Roadmap
April 2026
Design to Code Plugin
Our Figma-to-code export plugin returns — generate production-ready CSS directly from your shadcn/ui designs. Available as a local download for now.
May 2026
React Blocks
Coded React blocks for all Pro Block components — copy-paste ready front-end code to match your Figma designs.
June 2026
Academy
Video course on how to get the most out of the Obra shadcn/ui kit and customize it to your needs.
As shadcn/ui may change direction, our roadmap may adapt accordingly. We aim to provide the most value but can't predict where shadcn is going.
FAQ
- All shadcn/ui components
- 50+ Pro Blocks across marketing, e-commerce, and application UI — fully built with shadcn/ui variables, ready to copy-paste and customize
- Lifetime access and access to all future updates
Organization and Enterprise licenses also include the source code of the CSS export plugin, so your team can extend or self-host it.
The earlier you buy, the more value you get for your money, since every future update is included at no extra cost. Check out our roadmap to see what's coming next.
- Customer support — if you have questions about the kit or run into issues, reach out at [email protected] and we'll help you get sorted.
- Organization & Enterprise support — if you purchased an Organization or Enterprise license, you can request personalized support from the creator of the kit, including specific guidance around using the kit.
- Customization services — need the kit tailored to your brand or want us to design product features and flows? Our agency Obra Studio offers customization services where we go further and adapt the kit to your exact needs.
Figma allows you to publish libraries for use in Figma Make. If you customize your library and then publish it to work with Make, Make can read your shadcn/ui customizations.
Since Make uses shadcn/ui under the hood for most UI generation logic, you can use a customization of the Obra shadcn/ui kit to feed your custom design logic to Make.