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. Multi-brand theming is supported — use our Batch Mode Switcher plugin to visualize multiple brands without needing a Figma Enterprise license.
Pro Blocks
Copy-pasteable examples across marketing, e-commerce, and application UI — fully built with shadcn/ui variables.
1500+ Icons & All Tailwind Colors
All Lucide icons and every Tailwind 4 color included. Easily add other icon sets with our free Icon Sets Add-on.
Fully Documented
Every component documented with Obra Autodocs. Pro license includes a team-wide Autodocs key.
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.
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 use and customize the Obra shadcn/ui kit.
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
- Team-wide license key for Obra Autodocs plugin (included in your welcome e-mail)
- Lifetime access and access to all future updates
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, expect 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.