# shadcndesign

> shadcndesign is a design-to-code toolkit for shadcn/ui. It includes a Figma component kit, a Figma plugin that generates production-ready React/Tailwind code, Pro Blocks (copy-paste React sections), Next.js templates, a theme generator, and an educational academy. Sold as a one-time payment. Trusted by teams at Intel, Deloitte, TripAdvisor, and UC Berkeley. Endorsed by shadcn himself.

Docs and blog pages are also available as raw markdown: append `.md` to the page URL (e.g. `https://www.shadcndesign.com/docs/getting-started.md`) or request the canonical URL with `Accept: text/markdown`. The full documentation in one file: [llms-full.txt](https://www.shadcndesign.com/llms-full.txt).

## Products

- [Figma Kit](https://www.shadcndesign.com/components): 2,000+ Figma components mapped 1:1 to shadcn/ui. Supports light/dark mode, variables, and code generation via Code Connect.
- [Figma Plugin](https://www.shadcndesign.com/plugin): Generates shadcn/ui React + Tailwind code directly from Figma selections. Supports multiple AI models (Anthropic, Google AI Studio, v0) and custom variables.
- [Pro Blocks](https://www.shadcndesign.com/pro-blocks): Production-ready React sections for landing pages, application UIs, and e-commerce. Copy-paste into any Next.js or React project.
- [Pro Blocks — Landing Page](https://www.shadcndesign.com/pro-blocks/landing-page): Hero sections, feature grids, pricing tables, testimonials, CTAs, and more.
- [Pro Blocks — Application](https://www.shadcndesign.com/pro-blocks/application): Dashboards, sidebars, data tables, forms, and app-level UI patterns.
- [Pro Blocks — E-commerce](https://www.shadcndesign.com/pro-blocks/e-commerce): Product cards, checkout flows, cart UIs, and storefront sections.
- [Templates](https://www.shadcndesign.com/templates): Full Next.js starter templates including a SaaS dashboard and a developer portfolio.
- [Agent Skills](https://www.shadcndesign.com/agent-skills): Cursor agent skills that give AI coding assistants full context of the Figma kit and Pro Blocks for better code generation.
- [Themes](https://www.shadcndesign.com/themes): Pre-built shadcn/ui color themes ready to apply to any project.
- [Theme Generator](https://www.shadcndesign.com/theme-generator): Interactive tool to create custom shadcn/ui themes and export CSS variables for Tailwind v3 and v4.
- [Icons](https://www.shadcndesign.com/icons): Icon library guide and reference for use with shadcn/ui.

## Pricing

- [Pricing](https://www.shadcndesign.com/pricing): One-time payment. Four license tiers (Personal, Team Professional, Team Organization, Enterprise), each with Basic, Plus, and Premium plans. Sold via Polar as merchant of record.

## Documentation

- [Getting started](https://www.shadcndesign.com/docs/getting-started.md): Welcome to the Quick Start guide for shadcndesign! This page walks you through the basics of getting started with our Figma kit.
- [Styles](https://www.shadcndesign.com/docs/styles.md): Learn how the 8 shadcn/ui styles - Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra - work in our Figma kit, how to switch between them in one file, and how they relate to themes and light/dark.
- [Variables](https://www.shadcndesign.com/docs/variables.md): The shadcn/ui kit for Figma comes pre-configured with a comprehensive set of variables for colors, spacing, radius, typography, and widths. These variables ensure consistency and flexibility in your designs, and let a single file carry all 8 shadcn/ui styles.
- [Typeset](https://www.shadcndesign.com/docs/typeset.md): Typeset is the prose and markdown system in the shadcn/ui kit for Figma, mirroring shadcn's typeset.css. It gives long-form content consistent headings, paragraphs, lists, and measures that track your active style and light/dark mode.
- [Theming](https://www.shadcndesign.com/docs/theming.md): The shadcn/ui kit for Figma is designed to let designers apply their project's brand styling in minutes, and to give developers straightforward access to that styling for seamless application to shadcn/ui code.
- [Components](https://www.shadcndesign.com/docs/components.md): The shadcn/ui Figma kit provides a comprehensive set of components that mirror the official shadcn/ui framework. This section covers how to work with these components effectively, from basic editing to creating new variants and preparing for developer handoff.
- [Icons](https://www.shadcndesign.com/docs/icons.md): The shadcn/ui kit for Figma uses Lucide as its default icon library. If you want to use a different icon set for your project, follow the instructions below.
- [Development](https://www.shadcndesign.com/docs/development.md): The shadcn/ui kit for Figma is designed to bridge the gap between design and development seamlessly. This section will guide developers on effectively translating the themes and Figma designs into functional code.
- [Updates](https://www.shadcndesign.com/docs/updates.md): Every time we release a new update, you can access the new files via the Customer Portal. We provide updates to align with the latest shadcn/ui releases and incorporate user feedback. We also aim to provide updates when there's a new Figma feature or shadcn/ui component.
- [Pro Blocks](https://www.shadcndesign.com/docs/pro-blocks.md): Learn how to install Pro Blocks code into your shadcn/ui projects with the shadcn CLI 3.0.
- [Templates](https://www.shadcndesign.com/docs/templates.md): Learn how to install our templates code directly in your shadcn/ui project with the CLI.
- [Themes](https://www.shadcndesign.com/docs/themes.md): Learn how to install our free themes directly in your shadcn/ui project, or import them into your Figma file as a new style.
- [Introduction](https://www.shadcndesign.com/docs/plugin.md): Convert Figma designs to shadcn/ui code and manage design system variables with Figma to shadcn/ui plugin
- [Generate code](https://www.shadcndesign.com/docs/generating-code.md): Use the Figma to shadcn/ui plugin to generate high-quality shadcn/ui and Tailwind CSS code — or plain HTML & CSS — from your Figma designs.
- [Manage variables](https://www.shadcndesign.com/docs/variables-management.md): Use the Figma to shadcn/ui plugin to export and import design tokens between Figma and your Tailwind CSS projects.
- [Typeset](https://www.shadcndesign.com/docs/plugin-typeset.md): Export and import typeset.css between the shadcn/ui kit for Figma and your project with the Figma to shadcn/ui plugin.
- [Select and install Pro Blocks](https://www.shadcndesign.com/docs/plugin-pro-blocks.md): Use the Figma to shadcn/ui plugin to select and install Pro Blocks directly from your Figma designs.
- [Security](https://www.shadcndesign.com/docs/plugin-security.md): How the Figma to shadcn/ui plugin handles your designs, API keys, and generated code — what is sent, what is stored, and how to report a vulnerability.
- [Agent Skills](https://www.shadcndesign.com/docs/agent-skills.md): Curated agent skills that generate React components from Figma designs and sync design variables to your codebase.

## Blog

- [How to theme shadcn/ui with CSS Variables (Tailwind v4 Guide)](https://www.shadcndesign.com/blog/how-to-theme-shadcn-ui-with-css-variables.md): A practical guide to theming shadcn/ui with CSS variables: OKLCH tokens, dark mode, custom brand palettes, and applying a full theme in minutes.
- [New shadcn/ui Figma Component: Questionnaire](https://www.shadcndesign.com/blog/new-shadcn-ui-figma-component-questionnaire.md): The new shadcn/ui Questionnaire component is now in our Figma UI kit. Design multi-step surveys, onboarding flows, and intake forms in all 8 styles.
- [shadcn/ui Charts Explained: ChartConfig, Theming, and the Recharts 3 Upgrade](https://www.shadcndesign.com/blog/shadcn-ui-charts.md): How shadcn/ui charts actually work: what ChartContainer does, how ChartConfig drives colors, and what breaks when you move from Recharts 2 to Recharts 3.
- [shadcn/ui Registries Explained: How They Work (and How to Run Your Own)](https://www.shadcndesign.com/blog/shadcn-ui-registry-explained.md): How shadcn/ui registries actually work: registry.json, URL resolution, styles, and namespaces — explained by a team that runs a production registry.
- [What is the difference between Default and New York style in shadcn/ui?](https://www.shadcndesign.com/blog/difference-between-default-and-new-york-style-in-shadcn-ui.md): The Default style in shadcn/ui is deprecated and New York is what new projects get. Here's what actually differed between the two, what New York looks like today, and what to do if your components.json still says default.
- [Best UI Kits in 2026: Top 10 Options for Figma and React Design Systems](https://www.shadcndesign.com/blog/best-ui-kits-in-2025.md): A practical guide comparing 10 popular UI kits across ownership, Figma integration, component depth, and day‑to‑day costs to help you choose the right system.
- [All 8 shadcn/ui styles, now in one Figma file](https://www.shadcndesign.com/blog/shadcn-ui-kit-for-figma-all-8-styles-one-file.md): The shadcn/ui kit for Figma (PRO) now ships every style in a single file. Switch one variable mode and the whole kit restyles, plus a new Typeset system and Figma plugin 2.0.
- [6 Best Figma Kits for Tailwind CSS (2026)](https://www.shadcndesign.com/blog/6-best-figma-kits-for-tailwind-css.md): A practical guide to six Figma kits built for Tailwind workflows. Compare ownership vs dependency models, design-to-code fidelity, and real-world costs to choose the right system for your team.
- [Generate code for your stack with our plugin](https://www.shadcndesign.com/blog/stack-aware-code-generation-base-ui-frameworks-new-ai-models.md): The Figma to shadcn/ui plugin now generates code tailored to your project. Plus we added support for the Claude 5 family and Gemini 3.5 Flash.
- [Pro Blocks Now Support Base UI](https://www.shadcndesign.com/blog/pro-blocks-base-ui-support.md): Every Pro Block is now available in a Base UI variant. Our registry automatically serves the right version for your project — Radix UI setups keep working with zero changes.
- [Maia and Lyra styles, plus Decode Preset](https://www.shadcndesign.com/blog/maia-lyra-styles-and-decode-preset.md): Maia and Lyra are now available as shadcn/ui Figma kit styles, and the Figma plugin can decode shadcn/ui preset codes.
- [Is shadcn/ui free? Licensing, what's included, and what you still have to build yourself](https://www.shadcndesign.com/blog/is-shadcn-ui-free.md): Yes, shadcn/ui is free and MIT licensed, including for commercial use. Here's what's included, what the license allows, and what you still build yourself.
- [How to choose the right shadcn/ui style for your project](https://www.shadcndesign.com/blog/how-to-choose-shadcn-ui-style.md): Compare shadcn/ui styles to choose the right visual foundation for your product UI, Figma kit, and design system workflow.
- [Figma kit update, new Academy, and component refinements](https://www.shadcndesign.com/blog/figma-kit-update-may-2026.md): The Nova style Figma kit has been updated with new Academy lessons, new Figma lesson categories, and many component refinements.
- [Introducing new Figma kit styles](https://www.shadcndesign.com/blog/introducing-new-styles.md): Nova, Vega, Mira, and Luma are now available as dedicated shadcn/ui Figma kit styles for faster project setup.
- [How to Use Our shadcn/ui Figma Kit as a Design System for Claude Design](https://www.shadcndesign.com/blog/use-shadcn-ui-figma-kit-as-design-system-for-claude-design.md): Bootstrap a production-ready design system for Claude Design in minutes by pointing it at our shadcn/ui Figma kit and matching React codebase.
- [Shadcn UI kit vs Templates vs Pro Blocks: Best way to ship production UI](https://www.shadcndesign.com/blog/shadcn-ui-kit-vs-templates-vs-pro-blocks.md): Compare UI kits, templates, and Pro Blocks for shadcn/ui projects so you can choose the right approach for speed, flexibility, and long-term maintainability.
- [Best Figma design system kits for development teams (2026)](https://www.shadcndesign.com/blog/best-figma-design-system-kits-for-development-teams-2026.md): A practical 2026 comparison of Figma design system kits that map cleanly to code, with notes on variables, plugins, maintenance, and pricing.
- [Claude Code Skills for shadcn/ui: Why They Beat Prompts](https://www.shadcndesign.com/blog/claude-code-skills-vs-prompts.md): What Claude Code skills are, how they differ from one-off prompts, and why skills win for repeatable shadcn/ui and design-to-code work — with real examples.
- [Figma slots explained: building flexible components without detaching instances](https://www.shadcndesign.com/blog/figma-slots-explained-better-design-systems.md): Learn how Figma slots help teams build flexible components without detaching instances, and why they matter for a cleaner shadcn/ui design system.
- [shadcn/ui Agent Skills: Turn Figma Designs into Code with AI](https://www.shadcndesign.com/blog/agent-skills-turn-figma-designs-into-shadcn-ui-code-with-ai.md): Agent Skills teach Claude Code, Cursor, and Codex to generate production-ready shadcn/ui code straight from Figma designs — and sync design tokens to CSS.
- [Agent Skills and Figma Slots](https://www.shadcndesign.com/blog/agent-skills-and-figma-slots-update.md): We've launched Agent Skills for AI-powered Figma-to-code workflows, added slots to the Figma kit components, new Tailwind colors, updated AI models, and more.
- [Shadcn Pro Blocks guide: build landing pages, dashboards, and stores quickly](https://www.shadcndesign.com/blog/shadcn-pro-blocks-guide.md): Learn how to use Shadcn Pro Blocks to build landing pages, dashboards, and e-commerce stores faster with pre-structured, consistent UI sections.
- [How semantic colors work in shadcn/ui](https://www.shadcndesign.com/blog/how-semantic-colors-work-in-shadcn-ui.md): Learn how semantic colors work in shadcn/ui — why naming colors by role instead of hue keeps your UI consistent, accessible, and easy to theme across light and dark mode.
- [How to paste Tailwind v4 @theme CSS variables from a shadcn Theme Generator](https://www.shadcndesign.com/blog/how-to-paste-tailwind-v4-theme-css-variables-from-shadcn-theme-generator.md): A step-by-step guide for pasting Tailwind v4 @theme CSS variables from a shadcn theme generator into your globals.css. Covers the new CSS-first theming workflow, common mistakes, and how to fix them fast.
- [Introducing our shadcn/ui Theme Generator](https://www.shadcndesign.com/blog/introducing-shadcn-ui-theme-generator.md): I'm a designer who got tired of seeing beautiful components ruined by bad color choices and mismatched fonts. So I built a theme generator that makes it impossible to mess up.
- [The shadcn/create in Figma](https://www.shadcndesign.com/blog/shadcn-create-in-figma.md): We’ve brought shadcn/create into our Figma toolkit! Now with five icon libraries in a single kit and new shadcn/ui style. Spin up new projects in seconds using the Create feature.
- [How to automate design-to-code with Figma and v0](https://www.shadcndesign.com/blog/how-to-automate-design-to-code-with-figma-and-v0.md): Design-to-code that works: turn structured Figma files into shadcn/ui, refine in v0. How strong systems make AI reliable.
- [Why AI in Figma Depends More on Structure Than Prompts](https://www.shadcndesign.com/blog/why-ai-in-figma-depends-more-on-structure-than-prompts.md): AI in Figma works best when embedded in existing workflows and structure, not when generating from scratch. Learn why context, constraints, and routine work matter more than impressive demos.
- [82 New Pro Blocks for E‑commerce & Landing Pages](https://www.shadcndesign.com/blog/update-december-2025.md): We've added new Pro Blocks for landing pages and e‑commerce in Figma and React, plus refactored exisiting Landing Page blocks.
- [5 Best React Icon Libraries in 2026 (Lucide + Alternatives)](https://www.shadcndesign.com/blog/5-best-icon-libraries-for-shadcn-ui.md): Looking for Lucide alternatives? We compare the 5 best icon libraries for React and shadcn/ui — icon coverage, bundle size, Tailwind setup, and which to pick.
- [Why Your Team Needs a Shared Figma and React Library](https://www.shadcndesign.com/blog/why-your-team-needs-a-shared-library.md): Learn why shared Figma and React libraries prevent design-code drift, improve consistency, and accelerate development. A practical guide to building and maintaining a shared component system.
- [New AI models available in Figma to shadcn/ui plugin](https://www.shadcndesign.com/blog/plugin-ai-models-update.md): We've added three powerful new AI models to our Figma to shadcn/ui plugin: Claude 4.5 Sonnet, Claude Opus 4.5, and Gemini 3.0 Pro Preview. Experience more precise component generation and better code quality.
- [Use shadcn/ui kit for Figma with Figma Code Connect](https://www.shadcndesign.com/blog/figma-code-connect-shadcn-ui-kit.md): Learn how to use Figma Code Connect with the shadcn/ui Figma kit. Connect your 2000+ components to your codebase for seamless AI-assisted code generation with a step-by-step Code Connect UI setup.
- [Lucide vs Heroicons vs Radix Icons: Which to Pick in 2026](https://www.shadcndesign.com/blog/comparing-icon-libraries-shadcn-ui.md): Head-to-head comparison of Lucide, Heroicons, Material Symbols, and Radix Icons for shadcn/ui projects — style, coverage, bundle size, and a clear verdict.
- [shadcn/ui Icons: How to Use, Swap, and Customize Them](https://www.shadcndesign.com/blog/icons-guide-shadcn-ui.md): Everything about icons in shadcn/ui: where Lucide fits in, how to swap in another icon library, sizing and color tweaks, and keeping Figma in sync with code.
- [Figma to shadcn/ui Plugin Update: November 2025](https://www.shadcndesign.com/blog/plugin-update-nov-2025.md): A deeper, cleaner generation flow with a new Build tab, an Optional instructions field for precise guidance, unstyled shadcn/ui outputs, support for new components, and flexible variable export modes.
- [New Pro Blocks update: October 2025](https://www.shadcndesign.com/blog/pro-blocks-update-oct-2025.md): We’ve introduced 11 new Pro Blocks, refreshed several existing blocks, and added a collection of free blocks. The Figma kit has also been updated to include all the new components.
- [New website design, themes and free academy!](https://www.shadcndesign.com/blog/new-website.md): Announcing our new website built with Next.js and shadcn/ui, plus brand-new Themes and a free, no-login Academy for everyone.
- [Update October 2025](https://www.shadcndesign.com/blog/update-october-2025.md): We’ve updated our Figma UI kit to align with the latest shadcn/ui release and refined existing components for a better user experience.
- [How Much Salary Does a UX Designer Make in 2025?](https://www.shadcndesign.com/blog/how-much-salary-does-a-ux-designer-make-in-2025.md): UX salaries in 2025: Learn what drives the numbers and how to boost your total compensation.
- [How Much Salary Does a Product Designer Make in 2025?](https://www.shadcndesign.com/blog/how-much-salary-does-a-product-designer-make-in-2025.md): Discover the 2025 salary trends for product designers: average pay, key factors influencing earnings, and what skills can boost your value on the market.
- [What is a Design System? A 2025 Guide.](https://www.shadcndesign.com/blog/what-is-a-design-system-a-2025-guide.md): Learn what is a design system and why it matters in 2025.
- [Free SaaS Template is now available](https://www.shadcndesign.com/blog/free-saas-template-is-now-available.md): We're excited to share a new starter template we’ve been building: a polished, conversion‑focused SaaS landing page powered by shadcn/ui. It’s free, responsive, and ready to customize in v0 so you can ship today.
- [What is a UI Kit and why you should use one](https://www.shadcndesign.com/blog/what-is-a-ui-kit-and-why-you-should-use-one.md): Explore UI kits: your shortcut to consistent, user-friendly interfaces. This guide covers what they are, why you need one, and how to choose the best fit for your projects.
- [From Figma to code: Shipping faster with shadcn MCP, Figma MCP and Pro Blocks](https://www.shadcndesign.com/blog/from-figma-to-code.md): Learn how to turn Figma designs into production‑ready code using Pro Blocks, shadcn MCP and Figma MCP.
- [Registry update](https://www.shadcndesign.com/blog/registry-update.md): We updated our registry to use shadcn CLI 3.0. You can now install our Pro Blocks and Templates in a more convenient way.
- [Update August 2025](https://www.shadcndesign.com/blog/update-august-2025.md): Our Figma kit has been updated to include new components. Additionally, we've introduced a new Import feature and incorporated new AI models into our Figma plugin.
- [Developer Portfolio template is now available!](https://www.shadcndesign.com/blog/new-template-developer-portfolio.md): We are thrilled to announce the launch of our new developer portfolio template, designed specifically for the shadcn/ui library
- [The ShadcnDesign Academy is now available!](https://www.shadcndesign.com/blog/academy-is-now-available.md): We are excited to announce that we just released our Academy packed with short, on-point videos on how to utilize our products to deliver outstanding shadcn/ui projects faster.
- [The shadcn/ui kit for Figma: Update June 2025](https://www.shadcndesign.com/blog/the-shadcn-ui-kit-for-figma-update-june-2025.md): We updated our Figma kit to support the new Calendar Blocks and added new component states.
- [New Inspiro Template, Plugin update and Pro Blocks CLI](https://www.shadcndesign.com/blog/new-inspiro-template-plugin-update-pro-blocks-cli.md): Meet Inspiro, our new shadcn/ui & Figma template, faster Pro Blocks installation with CLI and our updated Figma plugin.
- [The shadcn/ui kit for Figma: Update May 2025](https://www.shadcndesign.com/blog/the-shadcn-ui-kit-for-figma-update-may-2025.md): Our shadcn/ui Figma kit receives a major update with Tailwind v4 compatibility, featuring a revamped variable system, expanded components, 28 new Pro Landing Page blocks, and enhanced plugin capabilities for streamlined design-to-development workflow.
- [How I use v0 to transform Figma designs into a shadcn/ui Production-Ready Website](https://www.shadcndesign.com/blog/how-i-use-v0-to-transform-figma-designs-into-a-shadcn-ui-production-ready-website.md): Transform your Figma design into shadcn/ui code using v0: A complete implementation guide.
- [Figma to shadcn/ui plugin - new features now available!](https://www.shadcndesign.com/blog/figma-to-shadcn-ui-plugin---new-features-now-available.md): We've just added new features to Figma to shadcn/ui plugin, including: Open in v0, Copy CLI command, Generate CSS and Import variables.
- [The shadcn/ui kit for Figma: Update January 2025](https://www.shadcndesign.com/blog/the-shadcn-ui-kit-for-figma-update-january-2025.md): We're excited to announce 39 new Pro Blocks, 2 Example pages, and 30 Patterns, including both design components and coded versions.
- [Convert Figma designs into production-ready shadcn/ui code](https://www.shadcndesign.com/blog/convert-figma-designs-into-production-ready-shadcn-ui-code.md): You asked, we listened! We released a new plugin to help you convert your Figma designs into shadcn/ui code.
- [The shadcn/ui kit for Figma: Update December 2024](https://www.shadcndesign.com/blog/the-shadcn-ui-kit-for-figma-update-december-2024.md): We're excited to announce 82 new Pro Blocks for our shadcn/ui Figma kit, including both design components and coded versions to help you build beautiful landing pages faster than ever.
- [The shadcn/ui kit for Figma: Update November 2024](https://www.shadcndesign.com/blog/the-shadcn-ui-kit-for-figma-update-november-2024.md): A major update introducing 67 new Pro Blocks in multiple styles, along with coded versions available in a new Premium Package.
- [The shadcn/ui kit for Figma: Update October 2024](https://www.shadcndesign.com/blog/the-shadcn-ui-kit-for-figma-update-october-2024.md): Explore the latest shadcn/ui kit for Figma, featuring the new Sidebar component, New York style, enhanced states, and improved functionality across multiple components.
- [Shadcn/ui Theme Pal - beta available!](https://www.shadcndesign.com/blog/shadcnui-theme-pal-beta-available.md): Export shadcn/ui themes from Figma to code! The beta version of our dedicated plugin is now available.
- [Hello World! Shadcn/ui kit for Figma is now available!](https://www.shadcndesign.com/blog/shadcn-ui-kit-for-figma-is-now-available.md): We are finally ready to share what we've been working on for the past few months! Shadcn/ui kit for Figma is now available!

## Academy

Step-by-step video lessons covering Figma basics, component editing, theming, code generation, AI model setup, and building complete projects. See all lessons at [https://www.shadcndesign.com/academy](https://www.shadcndesign.com/academy).

## Optional

- [Roadmap](https://www.shadcndesign.com/roadmap): Upcoming features and planned releases.
- [Help](https://www.shadcndesign.com/help): Contact and support.
- [Author: Matt Wierzbicki](https://www.shadcndesign.com/author/matt-wierzbicki): Creator of shadcndesign. Designer and developer.
- [Licensing](https://www.shadcndesign.com/licensing): Full license agreement.
- [RSS feed](https://www.shadcndesign.com/feed.xml): Blog updates.
- [Privacy Policy](https://www.shadcndesign.com/privacy-policy)
- [Terms of Service](https://www.shadcndesign.com/terms)