What is shadcncraft?
Pay-once kit of 400+ blocks and 119 components drawn 1:1 in Figma and in code, built on shadcn/ui.
Who is shadcncraft best for?
shadcncraft is best for product designers and front-end teams who design in Figma and ship with shadcn/ui React code.
Designers handing off to developers
The Figma kit mirrors the React registry one to one, with the same names, variants and layer names.
Figma to code with agents
Agent skills for Claude Code, Cursor and Codex turn a selected frame into shadcn/ui code and sync design tokens into globals.css.
SaaS and marketing pages
404 blocks cover marketing, application, e-commerce and AI screens, plus full apps such as banking and HR dashboards.
Installing by prompt
The registry works with the shadcn MCP server, so an assistant can build a page from shadcncraft parts and install what is missing.
How much does shadcncraft cost?
shadcncraft has a free tier; a single-user licence is a one-time $119 for Base Figma, $249 for Pro React, $299 for Pro Figma or $499 for Pro Figma + React.
- Free blocks and components for Figma and React
- Upgrade to a paid bundle anytime
- Official shadcn/ui Figma kit in all 8 styles
- Figma plugin with styles, themes and presets
- Lifetime updates, 24-hour support
- 352 Pro blocks and 58 Pro components in React
- Agent skills for Figma to code
- No Figma kit
- Official and Pro Figma kit
- 352 Pro blocks, pages and apps in Figma
- 12-hour support
Pro Figma + React costs $499 once and includes both. Team licences for 5 people cost $449, $899, $999 and $1,799 for the same four bundles, and Enterprise covers more seats. Prices include tax, every licence allows unlimited commercial use with lifetime updates, and you can upgrade by paying the difference. Full pricing on shadcncraft.com. We checked these prices on .
How do readers rate shadcncraft?
No one has rated shadcncraft yet. Be the first.
Sign in to rate. One rating per account.
How do I connect shadcncraft to my AI agent?
shadcncraft MCP is shadcncraft's official MCP server. Add it to your agent once, then ask it to turn shadcncraft Figma designs into shadcn React components.
Pairs the Figma and shadcn servers with shadcncraft's agent skills, so your agent can read a screen built with the shadcncraft kit and write React code that matches it.
shadcncraft gives each account its own server address. Open the setup guide, copy your address, then add it to Claude Code like any other server.
It runs on your computer, so Claude Code starts it when it needs it.
shadcncraft's setup guide covers the sign-in.
Then ask your agent
- Runs
- On your computer
- Sign-in
- See guide
- Maker
- shadcncraft
- Guide
- shadcncraft.com
What are the best shadcncraft alternatives?
Two tools on Recaply do shadcncraft's job.
Questions about shadcncraft
What is shadcncraft?
Pay-once kit of 400+ blocks and 119 components drawn 1:1 in Figma and in code, built on shadcn/ui.
Who is shadcncraft for?
shadcncraft is best for product designers and front-end teams who design in Figma and ship with shadcn/ui React code.
Is shadcncraft free?
Yes. shadcncraft has a free plan: free blocks and components for Figma and React.
How much does shadcncraft cost?
shadcncraft's paid plans are Base Figma at $119 one-time, 1 seat, Pro React at $249 one-time, 1 seat and Pro Figma at $299 one-time, 1 seat.
Does shadcncraft have an MCP server?
Yes. shadcncraft MCP is shadcncraft's official MCP server, so agents such as Claude Code, Cursor, Codex and GitHub Copilot can turn shadcncraft Figma designs into shadcn React components. It runs on your computer.
What are the best shadcncraft alternatives?
The closest alternatives on Recaply are Shadcn UI Kit and Shadcnblocks.
Where can I try shadcncraft?
On its official website, shadcncraft.com.
Is shadcncraft the same as Shadcraft?
Yes. The address shadcraft.com redirects to shadcncraft.com, the site of the shadcncraft Figma and React design system founded by Hamish O'Neill, so both names lead to the same kit.
shadcn/ui
Arc UI
BoardUI
Magic UI
21st.dev
termcn