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
Get your work done faster with Pro Blocks across 3 categories: Marketing, Application and E-commerce. Blocks adjust to your theme settings automatically and are purposefully minimalistic, to serve as a base for customization.
1800+ Icons & All Tailwind Colors
All Lucide icons and every Tailwind 4.2 color included.
Design to Dev
Export production-ready CSS straight from your Figma variables with our CSS Export plugin — free on the Figma Community.
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
May 14, 2026
React Blocks
Coded React blocks for the Marketing and Application Pro Block components — copy-paste ready front-end code to match your Figma designs. E-commerce blocks will follow in a later release.
June 2026
Academy
Video course on how to get the most out of the Obra shadcn/ui kit and customize it to your needs.
August 2026
Support Styles
shadcn/ui Create ships a growing mix of styles — from the friendly Luma style to the editorial Sera style. We're working to support them accurately in Figma.
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
From May 14, 2026, you'll also receive an authentication key to pull the React Pro Blocks (Marketing and Application) straight from the shadcn registry into your dev project.
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.