Untitled UI
Per-license pricingHuge Figma-first UI kit with a React variant that maps to shadcn-style tokens.
10 hand-picked products
shadcn Figma & Design Kits
These design kits mirror shadcn/ui components and tokens in Figma, so handoff between design and code stays clean: what a designer draws maps to a component that actually exists. Most are maintained alongside a code library listed elsewhere in this directory. The category is small and mostly free; paid kits add complete UI flows and variant libraries. Check the vendor page for which shadcn release a kit tracks — the base library moves fast.
Pricing and links last verified 2026-09-24.
shadcn/ui Figma Kit
Free + PremiumCommunity Figma design kit for shadcn/ui — free base, paid premium variants.
Obra shadcn/ui
One-timeElegant shadcn/ui Figma library in multiple styles, paired with a matching React blocks registry.
Shadcncraft
One-timeFigma kit that mirrors every native shadcn/ui style one-to-one with the code components.
ShadcnDesign
One-timeFigma design kit plus a plugin that converts designs into production-ready React code.
Shadcnspace Figma Kit
License tiersPremium Figma kit with 250+ blocks mapped one-to-one to their React library.
Shadcn Studio Figma Kit
One-timeLarge Figma design system with 1,000+ component variants, 750+ blocks and an AI export plugin.
Fonttrio
Open sourceFonttrio — open font pack for shadcn/ui projects.
Iconiq
Open sourceIconiq — open icon set for shadcn/ui projects.
SVGL
Open sourceSVGL — open icon set for shadcn/ui projects.
Frequently asked questions
- Do these Figma kits match shadcn/ui exactly?
- Good ones mirror the component set and tokens (radius, colors, typography) so designs map to real components. Check which shadcn release a kit tracks.
- Do I need Figma to use shadcn/ui?
- No — shadcn/ui is code-first. These kits matter when designers and developers work together on the same system.
- Are design kits free?
- Mostly. Paid kits add complete flows and variant libraries; the pricing model is on each card.