Blocks
Ship faster, stay aligned
Browse shadcn/ui block categories built for real interfaces.
6
404
1
Activity Feed
10
Banners
13
Benefits
4
Blog Listings
31
Calendar
5
Careers
3
Checkout
11
Contact
8
CTA
1
Dashboard
4
FAQs
3
File Uploads
4
Footers
6
Headers
10
Heroes
3
Inline CTA
5
Login
7
Metrics
3
Modals
3
Multistep
5
Newsletter Signup
7
Pricing
5
Product Category
6
Product Details
5
Product List
4
Progress
4
Section Footers
4
Shopping Cart
16
Sidebar
6
Social Proof
5
Team
11
Testimonials
5
Top Navigation
SBIOTJ
Join 3,000+ builders shipping with shadcncraft
Get access to all blocks and the full library
Production-ready blocks and components with matching Figma and React.
Benefits
A complete design system
Structured layouts designed to work together across marketing sites and product interfaces.
Structured Layouts
Clear grids, consistent spacing, and predictable hierarchy.
Marketing + App Coverage
Landing pages, dashboards, onboarding, pricing, e-commerce, and more.
Theme Compatible
Works seamlessly with semantic tokens and theming.
Production-Ready States
Designed with real content, tokenized spacing, and real interaction patterns.
Figma + React Parity (Pro + React)
Design in Figma and ship with aligned React components.
Composable by Design
Mix blocks together to create complete pages without layout conflicts.
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.
MCP server support
Build blocks and layouts directly inside your IDE with shadcncraft and the shadcn MCP server.
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.
