"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 ships no Figma file of its own, which is why the shadcn/ui docs point you to community kits instead. Mine is the one shadcn called the ultimate Figma kit for shadcn/ui. I rebuild every component in Figma with the same variant names, sizes, states and color tokens as the code, across all 8 shadcn/ui styles in the Pro kit, and I keep it in sync as shadcn/ui changes.
Judge any kit on four things: whether its 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. I went looking for a kit that did all four, could not find one, and built this instead. It ships 2,000+ components plus Pro Blocks and templates with matching React code, shadcn endorsed it, and 8,000+ creators and teams design in it.
The preview file is free. Open it and check how every component is built before you spend anything. Editing the components inside your own Figma files needs a one-time license from the pricing page. I have never put this behind a subscription and I do not plan to.
The Pro kit carries 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. It comes with the Plus and Premium packages, and Basic ships the Nova style on its own. I keep the 8 in a single file on purpose, because eight separate files would drift apart within a month.