Shadcndesign

Overview

shadcndesign is a shadcn/ui design ecosystem for Figma and React founded by Matt Wierzbicki, who previously maintained the Ant Design System. Its centerpiece is a Figma kit with 2,000+ components in all eight shadcn styles, with Figma variables that match the code. shadcn, the creator of shadcn/ui, is quoted on the site endorsing it, and the site reports 8,000+ creators and teams using it.

Around the kit sit 340+ Pro Blocks available as both Figma components and shadcn/ui code, a Figma plugin that converts designs into shadcn/ui code, ten Agent Skills for AI coding tools, templates, free themes, documentation and a video academy. Access is sold as a one-time lifetime payment with a 14-day refund policy.

Features

• Eight styles in one file: Nova, Vega, Mira, Luma, Sera, Maia, Rhea and Lyra switch through a single variable mode
• Figma kit components: Including data table, chart, sidebar, message scroller, questionnaire, trace and code block, plus five icon sets
• 340+ Pro Blocks: Landing page, application UI and ecommerce blocks in Figma, Figma Sites, React and Next.js, for Radix UI and Base UI
• Figma plugin: Turns any Figma element into shadcn/ui code or a self-contained HTML and CSS file, and exports, imports and creates styles
• Agent Skills: Ten skills that teach Claude, Cursor and Codex to generate components from Figma frames, build pages with Pro Blocks and import design tokens to CSS
• Learning resources: Documentation and an academy video series on the Figma to shadcn/ui process
• Extras: shadcn templates, free themes, a theme generator and a DS Manager tool

Tech stack

• Figma, React, Next.js, Tailwind CSS, shadcn/ui, Radix UI, Base UI