# shadcncraft > shadcncraft is a production-ready shadcn/ui design system delivered in both Figma and React: a suite of Figma UI kits matched 1:1 with a React registry installed through the shadcn CLI, sold as a one-time purchase with a free starter tier. shadcncraft has two matched halves. The React registry holds blocks, components, pages, and sites, installed with the shadcn CLI from the `@shadcncraft` namespace. The Figma side is a suite of UI kits carrying the same components, with all 8 shadcn styles native as Figma variable modes. The two are 1:1: a Figma layer name matches the React `data-slot` value. That parity is the differentiator, and it runs both ways. Design with the styles in Figma and install the identical components in code, and themes flow in either direction between tweakcn, shadcn Create, Figma, and production CSS or React. Surfaces: the Figma kits, the Figma plugin, the React registry, a hosted Storybook, agent skills for AI editors, and documented compatibility with the shadcn MCP and Figma MCP servers. Also distinguishing: two component bases, Radix UI and Base UI, across every style, for 16 installable combinations; 24 colour themes layerable over any style; and five swappable icon libraries. Items are free tier (installable with no credentials) or pro tier (served only against a licence key). Operated by AHO Pty Ltd. ## Pricing Every tier is a one-time payment with lifetime access to that tier, including future updates. There is no subscription. Licences are counted in seats: a seat is required for each person who has edit access to the Figma file, uses the Figma plugin, or installs components from the registry. Developers who only maintain a codebase that already contains installed components do not need a seat. Upgrades between tiers are self-serve and charge only the difference: https://shadcncraft.com/upgrade ### Base Figma All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation. Price (one-time, lifetime access, no subscription): - Single (1 designer or developer): $119 USD - Team (up to 5 designers or developers): $449 USD - Enterprise (more than 5 designers or developers, or organization-wide use): $999 USD Tax included. Includes: - shadcn/ui Figma UI kit: Official set only - All 8 shadcn styles: Figma - Icon library switching: Figma - Figma plugin: Styles, themes & presets - Storybook: Public online - Agent Skills: Token sync only - Updates: Free lifetime - Usage: Unlimited commercial - Support response: 24 hours Excludes: - 192 Pro Blocks - 55 Pro Components - Pro Pages & Sites ### Pro Figma Pro Components, Blocks, and Templates. A complete Figma (.fig) design system that lets you assemble polished layouts in seconds. Price (one-time, lifetime access, no subscription): - Single (1 designer or developer): $299 USD - Team (up to 5 designers or developers): $899 USD - Enterprise (more than 5 designers or developers, or organization-wide use): $1,399 USD Tax included. Includes: - shadcn/ui Figma UI kit: Official + Pro - All 8 shadcn styles: Figma - Icon library switching: Figma - 192 Pro Blocks: Figma - 55 Pro Components: Figma - Pro Pages & Sites: 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 Production-ready React components, Blocks, and Pages built on shadcn/ui, with no Figma required. Install from the registry and ship polished, accessible interfaces in your own codebase. Price (one-time, lifetime access, no subscription): - Single (1 designer or developer): $249 USD - Team (up to 5 designers or developers): $999 USD - Enterprise (more than 5 designers or developers, or organization-wide use): $1,799 USD Tax included. Includes: - All 8 shadcn styles: React - Icon library switching: React - 192 Pro Blocks: React - 55 Pro Components: React - Pro Pages & Sites: React (Site only) - Storybook: Online + offline build - Agent Skills: Sync + Figma to code - Updates: Free lifetime - Usage: Unlimited commercial - Support response: 12 hours Excludes: - shadcn/ui Figma UI kit - Figma plugin ### Pro Figma + React Pro Figma design system plus matching React components. Build production-ready interfaces with aligned design and code. Price (one-time, lifetime access, no subscription): - Single (1 designer or developer): $499 USD - Team (up to 5 designers or developers): $1,799 USD - Enterprise (more than 5 designers or developers, or organization-wide use): $2,999 USD Tax included. Includes: - shadcn/ui Figma UI kit: Official + Pro - All 8 shadcn styles: Figma + React - Icon library switching: Figma + React - 192 Pro Blocks: Figma + React - 55 Pro Components: Figma + React - Pro Pages & Sites: Figma + React (Site 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 ## Catalogue Counts are generated from the registry at build time. They cover shadcncraft's own items. The Figma kits additionally carry the official shadcn/ui component and block set, which is not counted here and is not installed from this registry. - Blocks: 192 - Pro Marketing: 121 - Pro Application: 48 - Pro E-commerce: 23 - Components: 55 - Hooks: 4 - Figma page designs: 11 (Figma only, there is no React install for pages) - Site templates: 1 (Figma plus a full Next.js repository) - Free-tier items (no licence key required): 22 - Colour themes layerable over any style: 24 Styles (8), each a complete re-theme of every item: - Vega (`vega`): Clean, neutral, and familiar - Nova (`nova`): Reduced padding and margins - Maia (`maia`): Rounded, with generous spacing. - Lyra (`lyra`): Boxy and sharp. For mono fonts. - Mira (`mira`): Made for compact interfaces. - Luma (`luma`): Fluid, luminous, and soft. - Sera (`sera`): Editorial and typographic. - Rhea (`rhea`): Like Luma but compact. Component bases (2). Every style is built on both, giving 16 installable base and style combinations: - Radix UI (`radix`): Optimized for fast development, easy maintenance, and accessibility. - Base UI (`base`): Components for building accessible web apps and design systems. Icon libraries (5), switchable per project: Lucide (`lucide`), Tabler Icons (`tabler`), HugeIcons (`hugeicons`), Phosphor Icons (`phosphor`), Remix Icon (`remixicon`) ## Free tier Free-tier items are served without a licence key and install with the plain shadcn CLI. They are the same design system as the paid tiers, with a smaller catalogue. Free blocks: `banner-10`, `benefits-13`, `contact-11`, `faqs-4`, `footer-4`, `newsletter-signup-5`, `testimonials-11`, `top-navigation-5` Free components: `avatar-stack`, `featured-icon`, `marquee`, `page-heading`, `placeholder-logo`, `profile-card`, `section-heading`, `star-rating`, `tagline`, `badge`, `image-zoom` Free hooks: `use-carousel`, `use-click-outside`, `use-mobile` Install a free item with no configuration and no credentials: ```bash npx shadcn@latest add @shadcncraft/avatar-stack ``` The Figma starter kit is free at https://shadcncraft.com/free. ## Install Initialise shadcn in the project, then install items from the `@shadcncraft` namespace. ```bash npx shadcn@latest init npx shadcn@latest add @shadcncraft/top-navigation-1 npx shadcn@latest list @shadcncraft npx shadcn@latest search @shadcncraft -q "navigation" npx shadcn@latest view @shadcncraft/top-navigation-1 ``` Pro items require a licence key in `components.json`. `{style}` selects a `{base}-{preset}` combination such as `radix-vega` or `base-luma`: ```json { "registries": { "@shadcncraft": { "url": "https://shadcncraft.com/r/{style}/{name}", "headers": { "X-License-Key": "${SHADCNCRAFT_LICENSE_KEY}", "X-Instance-Name": "${SHADCNCRAFT_INSTANCE_NAME}" } } } } ``` Set both variables in the environment. Single and Team licences also need the key activated against a matching instance name; Enterprise needs the key alone. ```bash SHADCNCRAFT_LICENSE_KEY="your_license_key" SHADCNCRAFT_INSTANCE_NAME="your_name@company.com" ``` The shadcn MCP server works against this registry with no extra configuration: ```bash npx shadcn@latest mcp init --client claude ``` ## Figma kits shadcncraft ships several Figma kits, built on the same variables and matched to the React registry. Every kit carries all 8 styles as native Figma variable modes, so switching style re-themes the whole file with nothing detached. - Free starter kit: a curated sample of components and blocks, free on Figma Community. - Base kit: the complete official shadcn/ui component and block set, rebuilt in Figma. Included with Base Figma and above. - Pro kit: the official set plus shadcncraft's own pro components, blocks, and page designs. Included with Pro Figma and Pro Figma + React. Pro React is code only and includes no Figma kit. Base kit preview: https://www.figma.com/design/J2TEyxBl5KhsemzOObfuW7/shadcncraft-Base-•-v3.0?node-id=7053-59081&t=HK1KQKlai4CbILOh-11 Pro kit preview: https://www.figma.com/design/AowV2WsmEZ4NXBlHlrsBg8/shadcncraft-Pro-•-v3.1-•-Preview?node-id=7053-59081 ## Figma plugin The Figma plugin is free to install and works alongside the kits. Install: https://www.figma.com/community/plugin/1596974152705664025 - Author a complete shadcn style natively in Figma: base colour, accent, chart palette, heading and body font, icon library, and radius, as Figma variable modes with nothing detached. - Two-way sync with shadcn Create: every style has a matching preset code. - Import themes from tweakcn, by preset, custom URL, or a signed-in account. - Import an existing `globals.css`, and export CSS back out as Tailwind v4 oklch. - React code export and shadcn CLI command generation, both of which require Pro Figma + React. ## Agent skills Agent skills package repeatable shadcncraft workflows for Claude Code, Cursor, and Codex. The skills themselves are MIT-licensed and free to install; what they install is subject to the registry licence. ```bash npx @shadcncraft/skills add all ``` - `shadcncraft-generate-code`: Turns a selected Figma frame, component, or page into React and shadcn/ui code, resolving the frame to the matching registry block and installing it rather than approximating the design. Requires Pro React or Pro Figma + React. - `shadcncraft-import-variables`: Syncs design tokens (color, radius, typography, shadow, spacing) into globals.css as a complete shadcn token set for light and dark, merged into a managed region that leaves surrounding customizations intact. ## Figma page designs - `settings`: Settings - `messaging`: Messaging - `dashboard`: Dashboard - `team`: Team - `pricing`: Pricing - `landing-page`: Landing Page - `faq`: FAQ - `contact`: Contact - `blog-listing`: Blog Listing - `blog-post`: Blog Post - `about`: About ## Links - [Pricing](https://shadcncraft.com/pricing): All tiers, seat counts, and current prices. - [Blocks](https://shadcncraft.com/blocks): Browsable block catalogue with live previews. - [Components](https://shadcncraft.com/components): Component catalogue with live previews. - [Pages](https://shadcncraft.com/pages): Full page designs in Figma, composed from pro components. - [ClearFlow](https://shadcncraft.com/sites/clearflow): Complete site template, Figma and React. - [Figma](https://shadcncraft.com/figma): The Figma kits: styles, variables, and component parity. - [Figma plugin](https://shadcncraft.com/figma/plugin): Author styles, import themes, export CSS and React. - [Free](https://shadcncraft.com/free): Free tier: what is included and how to install it. - [Preview](https://shadcncraft.com/preview): Browse the whole system before buying. - [Docs](https://shadcncraft.com/docs): Installation, registry, Figma, and agent skill documentation. - [Storybook](https://shadcncraft.com/storybook): Every component and block with controls for each prop. - [Agent Skills](https://shadcncraft.com/agent-skills): Skills for Claude Code, Cursor, and Codex. - [shadcn MCP](https://shadcncraft.com/shadcn-mcp): Using this registry through the official shadcn MCP server. - [Create](https://shadcncraft.com/create): Style presets and CLI commands for shadcn Create. - [Theme](https://shadcncraft.com/theme): Theming model: bases, styles, themes, and tokens. - [License](https://shadcncraft.com/license): Licence terms and seat definitions. - [About](https://shadcncraft.com/about): Who builds shadcncraft. ## Optional - [llms-full.txt](https://shadcncraft.com/llms-full.txt): Every registry item with install commands. - [Blog](https://shadcncraft.com/blog): Release notes and long-form articles. - [Changelog](https://shadcncraft.com/docs/changelog): Dated record of what shipped. - [Upgrade](https://shadcncraft.com/upgrade): Self-serve tier upgrade, charged as the difference. - [Support](https://shadcncraft.com/support): Discord and email support. - [Affiliates](https://shadcncraft.com/affiliates): Affiliate programme, application-gated. - [Ambassadors](https://shadcncraft.com/ambassadors): Licences in exchange for tutorials and sharing.