SIJTB
Trusted by 3,500+ creators and teams

Build production-ready shadcn/ui apps faster with 1:1 Figma and React

Design in Figma, ship in React without rework. Fully aligned components, theming, and AI-ready workflows.

Buy nowExplore blocks
Pay once. Lifetime updates.

Trusted by top teams

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 categories and theme

//
Benefits 3 of 13
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. No AI-generated layouts. 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.

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
Generate components and layouts directly inside your IDE using the shadcncraft 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

Smarter Analytics

Spot trends early, drill into anomalies, and share snapshots with your team without leaving the dashboard.

Q3_financial_review.pdf

8.2 MB / 18 MB

Uploading
Sale
Brand launch sale. 20% off everything.
AR
Alex RiveraToday 8:56am

Can you review the spacing tokens before we lock v2?

AR
Alex Rivera

tokens_v2.fig

4.1 MB

YouToday 9:01am

On it — I'll comment on the frame today.

🙌1

Transactions

Tax Refund

2024 Income Tax Refund

+$542.00Dec 20

Freelance Payment

Payment for Invoice #INV-4421 - Website redesign project

+$800.00Dec 14

Salary Payment

Monthly salary - Acme Corporation SRL, Payroll November 2025

+$2500.00Dec 01
Building dashboards without one-off UI
Engineering6 min read

Building dashboards without one-off UI

How tokens and composition help teams scale past ad-hoc cards.

Sa
Sarah Miller
12 Mar, 2025

Good design is invisible until it isn't — then it's the reason people trust the product.

Sa
Sarah Miller
12 Mar, 2025
Unified Messaging Hub
Connect every conversation across channels. Reply to emails, chat, and support tickets — all in one place.
Try it now
AR

Alex Rivera

Re: Q4 roadmap

Today 9:12am

Timeline is in the doc — quick pass on milestones when you can.

Ja
James Wilson
@jwilson

Expenses

Spending Balance

Shopping$900.00
Utilities$300.00
Bills$800.00
You saved 26% of your salary!

Active workspaces

142
Last 7 days

+8.1% vs prior week

98.2%
Uptime on paid tiers over the last 90 days
Tip: Pair inline hints with the field they explain — users scan faster when the hint sits next to the control, not below the whole form.

Upload Avatar

Min 300x430px, PNG or JPEG
Chris Anderson

Chris Anderson

VP Engineering
Drop brand assets or invoices, or choose from your computer

PNG, JPG, WebP, or PDF up to 10MB — we virus-scan on upload.

SHSHCFT$42.18$3.20

Stock Market

$120,748.00+1.25%
Shadcn Inc. (SDCN)
Market Cap$119K
Volume$122K

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

Theme and generate shadcn React code from Figma

Sync themes, manage semantic tokens, and keep your Figma 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.

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 kit
All official blocks & components
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
One-time paymentPlus local taxes
Get Pro now
shadcn/ui Figma kit
All official blocks & components
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
One-time paymentPlus local taxes
Get Pro + React now
shadcn/ui Figma kit
All official blocks & components
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.
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.
Send feedback