AGPAEFGACN

Loved by shadcn and 8K+ 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.

Trusted by teams at

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

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.

8 styles, one file

Switch one variable mode and the whole file restyles. Nova, Vega, Mira, Luma, Sera, Maia, Rhea & Lyra, all in a single PRO kit.

Components developers actually love

AI-Ready design system

Production-ready blocks

Essential icons & assets

Your brand, your rules

Always up to date

Agent Skills

Let your AI agent handle the workflow

Use our curated skill files that teach Claude, Cursor, and Codex how to turn Figma designs into clean shadcn/ui components and sync your design tokens.

Generate Components from Figma

Point your AI agent at any Figma frame and get a production-ready React component. It maps to your existing shadcn/ui components, installs missing ones, and downloads assets—no manual wiring.

Import Design Tokens to CSS

Compatible with all AI tools

Terminal

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.

FigmaFigma SitesReactNext.jsRadix UIBase UI

Figma to shadcn/ui plugin

Turn Figma designs into shadcn/ui code

Prefer working in Figma than using our Agent Skills? 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

Create styles

Install Pro Blocks

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

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.

MW

Matt Wierzbicki

Founder @ shadcndesign.com

Who is it for?

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