Overview

The Shadcn Studio Figma Kit is a premium shadcn/ui design system for Figma from shadcn/studio. It includes 1,000+ component variants, 1,000+ Pro blocks, 70+ charts, 1,500+ SVG icons, 10 landing pages, 9 dashboards and 22 app shells, all built with Figma Variables aligned to shadcn/ui. The site reports 1,600+ creators and teams using it.

Its latest update uses Figma Slots, so components, blocks and templates can be customized without detaching instances. A drag-and-drop builder assembles pages from pre-designed sections, and the shadcn/studio Figma plugin converts selected frames into shadcn/ui code, provides CLI install commands for blocks, and can open the result in v0. Layouts cover web, tablet and mobile, with a separate kit for mobile apps.

Features

1,000+ component variants: Organized with clear naming for discovery and reuse
1,000+ Pro blocks: Landing page, marketing, ecommerce and dashboard sections
Templates: Landing pages, dashboard and application templates, and multi-page frontend templates
Figma Slots: Swap content inside components and blocks without breaking structure
20+ themes: Each in light and dark mode, including Default, Marvel, Ghibli Studio and Clean Slate
Figma to code: The plugin generates shadcn/ui code from web or mobile frames and copies block CLI commands
Token import and export: Variables in OKLCH, HEX, RGB and HSL, compatible with Tailwind CSS 4 and shadcn/ui themes
Drag and drop builder: Assemble full pages from pre-designed sections with built-in color themes