All the essential shadcn/ui components and blocks for Figma
A complete, code-aligned shadcn/ui design kit for Figma. Every essential component and block is built pixel-perfect to match the real library, so your designs map cleanly to production code. Includes instant theming with tweakcn and a consistent token system that helps teams design faster without rebuilding the basics.
We built this kit because shadcn/ui has become a go-to for modern product teams, but there wasn’t a reliable, code-accurate way to design with it in Figma. Everyone was rebuilding components by hand, guessing spacing, or hacking together their own mini kits. I wanted a clean, dependable starting point that actually matches the real library and helps teams move faster. After months refining the tokens, spacing, and components, the Base Kit is finally ready. Hope it saves you a heap of time.
Love Shadcraft! It's such a timesaver - being able to explore UI through designs and not have to mess with any code. Highly recommend if you're building with shadcn/ui!
Upvoted! If the components truly "map cleanly to production code," it kills 90% of handoff friction right there.
If you're building with shadcn/ui, you need this in your life!
Categories come from the product's launch tags. Most products appear in 2-3 categories. The primary category is listed first.
The scores reflect launch-period engagement. Historical data is preserved and doesn't change retroactively. The build date at the bottom shows when the index was last refreshed.
Check the similar products section on this page, or browse the category pages linked in the tags above. Each category page shows all products for a given year, sorted by engagement.
A measure of community engagement at launch. Higher means more people noticed and interacted with the product. It's a traction signal, not a quality rating.