SIJTB
Trusted by 3,500+ creators and teams

shadcn/ui components, blocks, and Figma UI Kit

Build production-ready apps faster with 1:1 Figma and React, advanced theming, and AI workflows
Buy nowExplore blocks
Pay once. Lifetime updates.

Trusted by top teams

shadcncraft product showcase

224 production-ready shadcn/ui blocks

Production-ready layouts with real structure, spacing, and hierarchy. Designed for teams building real products. Available in Figma and React.
Explore all blocks

Try it live! Switch blocks and customize them

//
Multistep 2 of 3
Open in New TabView in Figma
Buy Pro

Browse all 224 shadcn/ui blocks

Built on official shadcn/ui components with real structure, spacing, and accessibility. Designed for real products in Figma and React.
4046
Activity Feed
Banners10
Benefits13
Blog Listings4
Calendar31
Careers5
Checkout3
Contact11
CTA8
Dashboard
FAQs4
File Uploads3
Footers4
Headers6
Heroes10
Inline CTA3
Login5
Metrics7
Modals3
Multistep3
Newsletter Signup5
Pricing7
Product Category5
Product Details6
Product List5
Progress4
Section Footers4
Shopping Cart4
Sidebar16
Social Proof6
Team5
Testimonials11
Top Navigation5

Looking for something specific? Browse all shadcn/ui blocks.

What’s included

shadcn vs shadcncraft

shadcn gives you the core components. shadcncraft builds on top with production-ready components, blocks & pages, and a matching Figma UI kit.
Figma

shadcn

No official Figma UI kit

shadcncraft

Complete Figma UI kit with theming and component states

Components

shadcn

Open source component primitives

shadcncraft

Production-ready components built on shadcn

Starting point

shadcn

Assemble UI from scratch

shadcncraft

Start from real blocks and full pages

Setup effort

shadcn

Assembly required — you compose the UI

shadcncraft

Pre-structured UI that works out of the box

AI workflow

shadcn

Code-only — no design layer for AI to read

shadcncraft

Works with Figma MCP for AI-assisted design-to-code

License

shadcn

Free and open source

shadcncraft

Paid, with a free tier

Compare our bundlesRead more
Artificial Intelligence

Built for modern development workflows

shadcncraft blocks integrate with AI tools and developer workflows built around shadcn/ui.
Export Figma layouts to React
Convert structured Figma designs into shadcn/ui-compatible React code using the plugin.
Export Figma layouts to React
MCP server support
Build blocks and layouts directly inside your IDE with shadcncraft and the shadcn MCP server.
MCP server support
Works with modern AI builders
Open blocks in v0 (coming soon) and use them with tools like Cursor or Figma Make to generate pages faster.
Works with modern AI builders

Why I built shadcncraft

shadcn/ui is a modern, composable component system for React built on Tailwind CSS. It gives developers control and flexibility.

After years building design systems for large product teams, I saw a gap in the shadcn/ui ecosystem. The core is powerful, but many block libraries prioritize speed over structure.

I built shadcncraft to extend shadcn/ui the right way — with production-ready components, blocks, and themes for Figma and React, designed for teams shipping real products.

Learn more about how shadcncraft builds on shadcn/ui.
Ha
Hamish O'Neill
Founder, shadcncraft

109 production-ready shadcn/ui components

Advanced, production-ready components that extend the core shadcn/ui system with deeper states, patterns, and real-world use cases in Figma and React.
Explore all components
Buy Pro

Browse all 109 shadcn/ui components

Built on official shadcn/ui primitives with deeper states, patterns, and accessibility baked in. Designed for real product interfaces in Figma and React.
Accordion
Activity Feed Item
Alert
Alert Dialog
Announcement
Avatar
Avatar Stack
Avatar Upload2
Badge
Balance3
Blog Blockquote
Blog Image
Blog Listing Card2
Blog Listing Featured Card3
Breadcrumb
Button
Button Group
Calendar
Card
Carousel
Cart Item
Chart
Checkbox
Chip
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Expenses
Feature Stack
Featured Icon
Field
File Upload Area
File Upload Card
Form
Hover Card
Image Zoom
Inline Hint
Input
Input Group
Input OTP
Item
Job Listing
Kbd
Label
Marquee
Menubar
Message Card
Messaging
Metric
Metric Card2
Mobile Navigation Menu
Navigation Menu
Page Heading
Pagination
Placeholder Logo
Popover
Pricing Card
Product Card2
Product Category Card
Profile Card
Progress
Progress Item
Radio Group
Resizable
Rich Separator
Scroll-area
Section Heading
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spending Balance
Spinner
Star Rating
Stock Market
Sub Feature
Switch
Table
Tabs
Tagline
Tags
Team Card2
Textarea
Ticker
Toast
Toggle
Toggle Group
Tooltip
Transactions
UI Showcase

Looking for something specific? Browse all shadcn/ui components.

Community

Trusted by shadcn and builders across 𝕏

Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
sh
shadcn
@shadcn
if you're a designer, this is the best way to get started building in 2025
Sa
Sahaj
@iamsahaj_xyz
I've discovered the shadcncraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks shadcncraft!
Ja
Jason Kitio
@jason_kitio
@shadcncraft_ just turned my random figma clicking into design system "magic". 10/10 would theme again.
Re
Reza
@creativerezz
Join 3,000+ designers and developers building with shadcncraft.
Free Figma plugin

Create shadcn styles and generate React code from Figma

Build complete shadcn styles, layer in themes from tweakcn or CSS, and keep your Figma UI kit and React code perfectly aligned across your shadcn stack.
Try it out Learn more
See it in action
Pages & Sites

Complete production-ready layouts built on shadcn/ui

From high quality Figma Pages to fully built Next.js sites like ClearFlow, start with a proven layout or launch with a production-ready multi-page website built on shadcn/ui and shadcncraft. Crafted with the same attention to detail as the core system.
Explore all PagesExplore ClearFlow
SettingsProfile, billing, security & team preferences
Buy Pro
Settings (light mode)
Included in Pro and Pro + React.
Pricing

One-time payment. Lifetime updates

Upgrade any time and only pay the difference.
Sale shadcn styles launch.

Choose your team size

For one person editing Figma, or building with React.

  • 1 designer or developer
Which license do I need?How do I upgrade my bundle?

Base

All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.

$119
One-time paymentPlus local taxes
Get Base now
shadcn/ui Figma UI kit
All official blocks & components
shadcn styles
Coming soon
Pro Blocks
Not included
Pro Components
Not included
Pro Pages & Sites
Not included
Figma plugin
Theming
Updates
Free lifetime
Usage
Unlimited commercial
Support response
24 hours

Pro

Pro Components, Blocks, and Templates. A complete Figma design system that lets you assemble polished layouts in seconds.

$299$254
One-time paymentPlus local taxes
Get Pro now
shadcn/ui Figma UI kit
All official blocks & components
shadcn styles
Figma (.fig)
Pro Blocks
Figma (.fig)
Pro Components
Figma (.fig)
Pro Pages & Sites
Figma (.fig)
Figma plugin
Theming
Updates
Free lifetime
Usage
Unlimited commercial
Support response
12 hours
Popular

Pro + React

Pro Figma design system plus matching React components. Build production-ready interfaces with aligned design and code.

$499$424
One-time paymentPlus local taxes
Get Pro + React now
shadcn/ui Figma UI kit
All official blocks & components
shadcn styles
Figma + React
Pro Blocks
Figma + React
Pro Components
Figma + React
Pro Pages & Sites
Figma + React (Site only)
Figma plugin
Theming + React export
Updates
Free lifetime
Usage
Unlimited commercial
Support response
12 hours
Prices in USDSecure 256-bit SSL Encrypted payments by Polar.Already a customer? Upgrade your bundle
Free

Make a commitment-free start

Start with Free and access a curated set of shadcn components in the Figma community library, try theming via the plugin, and use the free shadcncraft React registry.
Start for FreeFind out more

Frequently Asked Questions

Quick FAQs to get you started.
Still have questions? See all FAQs, or get support.

shadcncraft is a production-ready design system built on shadcn/ui. It includes a Figma UI kit and matching React components with one-to-one alignment between design and code.

Design it once. Ship it exactly.

Real support from the team behind shadcncraft

Get help within 24 hours from the people who build and maintain the system.
Email
Prefer a direct line? Send us a message and we'll get back to you as soon as possible.
Contact
Discord
Get quick support, share feedback, or connect with other builders.
Join
Feedback
Got something to say about anything shadcncraft? We'd love to hear it.