# 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.

## 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): How to set up and use shadcndesign products.
- [Components](https://www.shadcndesign.com/docs/components): Overview of the Figma component kit and how to use it.
- [Figma Plugin Introduction](https://www.shadcndesign.com/docs/plugin): How to install and use the Figma to shadcn/ui plugin.
- [Generate Code](https://www.shadcndesign.com/docs/generating-code): Step-by-step code generation with the plugin.
- [Pro Blocks](https://www.shadcndesign.com/docs/pro-blocks): How to browse, copy, and use Pro Blocks in your project.
- [Plugin Pro Blocks](https://www.shadcndesign.com/docs/plugin-pro-blocks): How to select and install Pro Blocks directly from within the plugin.
- [Variables](https://www.shadcndesign.com/docs/variables): Working with design tokens and Figma variables in the kit.
- [Variables Management](https://www.shadcndesign.com/docs/variables-management): How to manage and export variable collections.
- [Themes](https://www.shadcndesign.com/docs/themes): Applying and customizing themes in Figma and code.
- [Theming](https://www.shadcndesign.com/docs/theming): Deep dive into the theming system and CSS variable structure.
- [Templates](https://www.shadcndesign.com/docs/templates): How to use and extend the included Next.js templates.
- [Icons](https://www.shadcndesign.com/docs/icons): How to use and add icons in the kit.
- [Agent Skills](https://www.shadcndesign.com/docs/agent-skills): How to install and use AI agent skills in Cursor.
- [Development](https://www.shadcndesign.com/docs/development): Developer setup and integration notes.
- [Licensing Agreement](https://www.shadcndesign.com/docs/licensing): Full license terms by tier.
- [Updates](https://www.shadcndesign.com/docs/updates): Changelog and release notes.

## Blog

Articles covering design-to-code workflows, shadcn/ui theming, Figma tips, AI-assisted development, and product updates. See all posts at [https://www.shadcndesign.com/blog](https://www.shadcndesign.com/blog).

## 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).

## Other

- [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.
- [Privacy Policy](https://www.shadcndesign.com/privacy-policy)
- [Terms of Service](https://www.shadcndesign.com/terms)