New
We've rebuilt our website, added themes and free academy access!
AGPAEFGACN
Loved by shadcn and 6000+ creators and teams

Design & ship shadcn/ui projects faster

Extensive collection of Figma and React resources to help designers, developers, and teams deliver shadcn/ui projects efficiently.

Saving time for the top designers and developers

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 100,000+ designers 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 Pro Blocks, templates, video academy, and a plugin that exports clean code. Everything stays updated, with direct support from me. Now it's yours to use.

MW

Matt Wierzbicki

Founder @ shadcndesign.com

shadcn/ui kit for Figma

Create pixel-perfect shadcn/ui designs

Meet the Figma kit that matches shadcn/ui perfectly. Get pixel-perfect components, production-ready blocks, and accurate Tailwind CSS alignment.

Components developers actually love

Every component perfectly mirrors shadcn/ui code. Auto-layout, variants, and Tailwind CSS variables ensure perfect alignment between design and development.

AI-Ready design system

Production-ready blocks

Essential icons & assets

Your brand, your rules

Always up to date

Components developers actually love
Endorsed by the creator of shadcn/ui
"This is the ultimate Figma kit for shadcn/ui. If I were to build a Figma kit, this is what I would've built."
CN

shadcn

Creator of shadcn/ui

Figma to shadcn/ui plugin

Turn Figma designs into shadcn/ui code

Convert your Figma designs into clean, production-ready shadcn/ui code. Save days of development time and eliminate design-to-code mismatches.

Generate Production-Ready Components

Select any Figma element and get clean shadcn/ui code instantly. Proper structure, accessibility, and best practices included—exactly how developers need it.

Export styles

Import styles

Install Pro Blocks

Generate Production-Ready Components
Academy & Documentation

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.

Who is it for?

Join 6K+ 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

Level-up your workflow today

One-time payment
14 days refund policy