"This is the ultimate Figma kit for shadcn/ui. If I were to build a Figma kit, this is what I would've built."
shadcn
Creator of shadcn/ui
8 styles, one file
Components developers actually love
AI-Ready design system
Production-ready blocks
Essential icons & assets
Your brand, your rules
Always up to date
Generate Components from Figma
Build Pages with Pro Blocks
Import Design Tokens to CSS
Compatible with all AI tools
Design and build even faster
Stop building layouts from scratch. Get our ready-to-use blocks available as both Figma components and production-ready shadcn/ui code.
Generate Production-Ready Components
Export styles
Import styles
Create styles
Install Pro Blocks
Learn, design and build with shadcn/ui
No more weeks of onboarding or senior devs stuck answering questions. Our comprehensive docs and Academy let you become self-sufficient fast.
Why I built this
I searched everywhere for a quality shadcn/ui kit for Figma. Everything was outdated, poorly crafted, or abandoned.
After 7 years building Figma resources for top teams and maintaining the Ant Design System, I knew exactly what was missing, so I built it.
This is the complete shadcn/ui ecosystem I wished existed: pixel-perfect Figma kit, production-ready blocks, templates, academy, and Figma to code solutions. Everything stays updated, with direct support from me.
Founder @ shadcndesign.com
Join 8K+ pros who design & ship faster
Our ecosystem eliminates the friction between design and development. Every role gets exactly what they need to work and collaborate faster.
Designers
Ship pixel-perfect designs that developers can actually build
Design 10x faster with pre-built components and blocks
Stay current with AI tools that already understand your components
Focus on UX and conversion, not component building from scratch
Level up your skills with shadcn/ui best practices built-in
"Our company selected shadcn as our primary design library, and its been a fantastic choice. The design kit is sleek, modern, and offers excellent UX right out of the box. Its comprehensive variable system has significantly improved our efforts around branding and accessibility."
Ryan Almoneda
UX Designer @ BlackDuck
shadcn/ui Figma kit questions
No. shadcn/ui is a code library and does not ship its own Figma file. The shadcn/ui docs point to community-made kits instead. This kit is the one shadcn himself called the ultimate Figma kit for shadcn/ui: every component is rebuilt in Figma with the same variant names, sizes, states and color tokens as the code, in all 8 shadcn/ui styles, and it is kept in sync with the shadcn/ui code.
Judge a kit on four things: whether the Figma components use the exact variant names and tokens from the code, whether it covers all 8 shadcn/ui styles, whether it uses Figma variables so a theme switches in one click, and how closely it follows shadcn/ui updates. This kit does all four, ships 2,000+ components plus Pro Blocks and templates with matching React code, and is the kit endorsed by shadcn and used by 8,000+ creators and teams.
You can open the preview file for free and inspect every component. Editing the components in your own Figma files needs a one-time license from the pricing page. There is no subscription.
All 8 shadcn/ui styles in one file: Nova, Vega, Mira, Luma, Sera, Maia, Rhea and Lyra. You switch the style from the Figma variables panel and every component updates.