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

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

Pro Blocks

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.

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.

Documentation

Get instant answers and design faster with our comprehensive documentation

Academy

Learn the complete Figma to shadcn/ui process in a step-by-step video series

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