The largest shadcn/ui design system for Figma and React
Hundreads of production-ready components and blocks aligned 1:1 between design and code.
Pay once. Lifetime updates.Trusted by top teams
208 production-ready shadcn/ui blocks
Production-ready layouts with real structure, spacing, and hierarchy. Designed for teams building real products. Available in Figma and React.
Try it live! Switch categories and theme
Browse all 208 shadcn/ui blocks
Built on official shadcn/ui components with real structure, spacing, and accessibility. No AI-generated layouts. Designed for real products in Figma and React.
Built for modern development workflows
shadcncraft blocks integrate with AI tools and developer workflows built around shadcn/ui.
Why I built shadcncraft
shadcn/ui is a modern, composable component system for React built on Tailwind CSS. It gives developers control and flexibility.
After years building design systems for large product teams, I saw a gap in the shadcn/ui ecosystem. The core is powerful, but many block libraries prioritize speed over structure.
I built shadcncraft to extend shadcn/ui the right way — with production-ready components, blocks, and themes for Figma and React, designed for teams shipping real products.
Learn more about how shadcncraft builds on shadcn/ui106 production-ready shadcn/ui components
Advanced, production-ready components that extend the core shadcn/ui system with deeper states, patterns, and real-world use cases in Figma and React.
Browse all 106 shadcn/ui components
Built on official shadcn/ui primitives with deeper states, patterns, and accessibility baked in. Designed for real product interfaces in Figma and React.
Looking for something specific? Browse all shadcn/ui components.
Trusted by shadcn and builders across
Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
I've discovered the shadcncraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks shadcncraft!
@shadcncraft_ just turned my random figma clicking into design system "magic". 10/10 would theme again.
Recently purchased! Great kit! Excited to see more web app components vs website oriented ones.
Came across shadcncraft while hunting for a proper Figma kit for shadcn/ui… and it instantly changed my workflow. I went from slowly exploring components in code to rapidly prototyping in Figma. My design flow is easily 10x faster. If you're using shadcn/ui in 2025, this is the kit
Shoutout to @shadcncraft ! it's made designing in Figma for us non designers a breeze. The fact that I can deeply customize my theme with tweakcn then just have them synced with Figma with LIGHT and DARK mode??? 🤤
I tried @shadcncraft while putting together a block and it worked very well. The 200+ components cover pretty much everything, and the light/dark themes make it consistent. Feels solid, saves time, and lets me focus more on the actual design instead of fiddling with missing parts
So grateful to @shadcncraft for donating the UI kit for figma it's helped us make our @RubyforGood app beautiful quickly. We love the theme and it's covered almost everything we need.
Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
I've discovered the shadcncraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks shadcncraft!
@shadcncraft_ just turned my random figma clicking into design system "magic". 10/10 would theme again.
Join 3,000+ designers and developers building with shadcncraft.
Theme and generate shadcn React code from Figma
Sync themes, manage semantic tokens, and keep your Figma kit and React code perfectly aligned across your shadcn stack.
Complete production-ready layouts built on shadcn/ui
From high quality Figma Pages to fully built Next.js sites like ClearFlow, start with a proven layout or launch with a production-ready multi-page website built on shadcn/ui and shadcncraft. Crafted with the same attention to detail as the core system.
Included in Pro and Pro + React.
One-time payment. Lifetime updates
Upgrade any time and only pay the difference.
Choose your team size
For one person editing Figma, or building with React.
- 1 designer or developer
Base
All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.
Pro
Pro Components, Blocks, and Templates. A complete Figma design system that lets you assemble polished layouts in seconds.
Pro + React
Pro Figma design system plus matching React components. Build production-ready interfaces with aligned design and code.
Choose your team size
For one person editing Figma, or building with React.
- 1 designer or developer
Base
All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.
Pro
Pro Components, Blocks, and Templates. A complete Figma design system that lets you assemble polished layouts in seconds.
Pro + React
Pro Figma design system plus matching React components. Build production-ready interfaces with aligned design and code.
Make a commitment-free start
Start with Free and access a curated set of shadcn components in the Figma community library, try theming via the plugin, and use the free shadcncraft React registry.
Frequently Asked Questions
Quick FAQs to get you started.
Still have questions? See all FAQs, or get support.
shadcncraft is a production-ready design system built on shadcn/ui. It includes a Figma UI kit and matching React components with one-to-one alignment between design and code.
Design it once. Ship it exactly.
Real support from the team behind shadcncraft
Get help within 24 hours from the people who build and maintain the system.