SIJTB
Trusted by 16,000+ creators and teams

shadcn/ui components, blocks, and Figma kit, built for AI workflows

1:1 Figma and React with agent skills and MCP-ready blocks, so Claude Code, Cursor, and Codex build with your blocks, components and tokens.
Buy nowExplore blocks
Pay once. Lifetime updates.

Trusted by top teams

shadcncraft product showcase

282 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

//
Table 13 of 21
Open in New TabView in Figma
Buy Pro

Browse all 282 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
App Shell Headers5
App Shells3
Banners10
Benefits13
Blog Listings4
Calendar31
Careers5
Chat5
Checkout3
Contact11
CTA8
Dashboard
FAQs4
File Uploads3
Footers4
Headers6
Heroes10
Inline CTA3
Kanban
Login5
Metrics7
Modals3
Multistep3
Newsletter Signup5
Pricing7
Product Category5
Product Details6
Product List5
Progress4
Sales & Marketing Dashboard23
Section Footers4
Shopping Cart4
Sidebar16
Social Proof6
Tables21
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
Introducing UI Rules

Make your shadcn apps look, feel, and sound like you.

We built UI Rules as a companion to shadcncraft. Connect your design system guidelines to AI, so it knows how your components come together, how your app behaves, and how your brand speaks.

Explore UI Rules

The what.

What your app is made of. The components, blocks, and apps you build with.

The how.

Your styles and guidelines. How your app looks, feels, and sounds.

The perfect complement to shadcncraft.

One home. Always up to date.

Keep your guidelines in one place and connect via MCP. Give your AI tools the latest guidance for every build.

Your styles, from the start.

Let AI apply your styles automatically. Start every new shadcn app with your brand already in place.

Start with the best thinking.

Build on guidelines from leading design system teams. Make their best practices part of every app.

“Now all my agents had a common place to dig into, and instead of 100 rules scattered around requirement docs, CLAUDE.md, memory etc there is a central repo for it. Like Git but for design rules.”

Image
Yavnik SharmaProduct Builder
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
Agent Skills for your editor
Install Agent Skills and build with shadcncraft inside Claude Code, Cursor, and Codex to turn Figma into code and sync tokens, just by asking.
Agent Skills for your editor
The step-by-step setup guide
Everything you need to get Figma, Claude Code and GitHub talking to each other. Follow along from a blank project to a live page, then ship it.

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

124 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 124 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
Attachment
Avatar
Avatar Stack
Avatar Upload2
Badge
Balance3
Blog Blockquote
Blog Image
Blog Listing Card2
Blog Listing Featured Card3
Breadcrumb
Bubble
Button
Button Group
Calendar
Card
Carousel
Cart Item
Chart
Chat7
Checkbox
Chip
Code Snippet
Collapsible
Combobox
Command
Context Menu
Data Table
Data Table Pagination
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
Marker
Marquee
Menubar
Message
Message Card
Message Scroller
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
Questionnaire
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 16,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 & Apps

Complete production-ready layouts built on shadcn/ui

From high quality Figma Pages to fully built Next.js apps 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
DashboardCards, charts & transaction tables
Buy Pro
Dashboard (light mode)
Included in Pro Figma and Pro Figma + React.
Pricing

One-time payment. Lifetime updates

Upgrade any time and only pay the difference.

Team size

Edit the Figma kit or install from the registry for 1 designer or developer.

License infoUpgrade now

Base Figma

$119
One paymentlifetime access
Tax included
Get Base Figma
shadcn/ui Figma UI kit
Official set only
All 8 shadcn styles
Figma
Icon library switching
Figma
229 Pro Blocks
Not included
63 Pro Components
Not included
Pro Pages & Apps
Not included
Figma plugin
Styles, themes & presets
Storybook
Public online
Agent Skills
Token sync only
Updates
Free lifetime
Usage
Unlimited commercial
Support response
24 hours

Pro Figma

$299
One paymentlifetime access
Tax included
Get Pro Figma
shadcn/ui Figma UI kit
Official + Pro
All 8 shadcn styles
Figma
Icon library switching
Figma
229 Pro Blocks
Figma
63 Pro Components
Figma
Pro Pages & Apps
Figma
Figma plugin
Styles, themes & presets
Storybook
Public online
Agent Skills
Token sync only
Updates
Free lifetime
Usage
Unlimited commercial
Support response
12 hours

Pro React

New
$249
One paymentlifetime access
Tax included
Get Pro React
shadcn/ui Figma UI kit
Not included
All 8 shadcn styles
React
Icon library switching
React
229 Pro Blocks
React
63 Pro Components
React
Pro Pages & Apps
React (App only)
Figma plugin
Not included
Storybook
Online + offline build
Agent Skills
Sync + Figma to code
Updates
Free lifetime
Usage
Unlimited commercial
Support response
12 hours

Pro Figma + React

$499
One paymentlifetime access
Tax included
Get Pro Figma + React
shadcn/ui Figma UI kit
Official + Pro
All 8 shadcn styles
Figma + React
Icon library switching
Figma + React
229 Pro Blocks
Figma + React
63 Pro Components
Figma + React
Pro Pages & Apps
Figma + React (App only)
Figma plugin
Styles, presets & React
Storybook
Online + offline build
Agent Skills
Sync + Figma to code
Updates
Free lifetime
Usage
Unlimited commercial
Support response
12 hours
Ha

Want to talk through options? Book a free call with me, from tailored enterprise billing to picking your first bundle.

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.