Blocks

shadcn/ui blocks for React and Figma

Browse shadcn/ui block categories built for real interfaces.

SBIOTJ

Join 9,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

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 Figma + 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

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.

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.