Shadcn UI Figma Kit | Figma | Docs

The Shadcnblocks Figma Kit is a fully scalable design system focused on theming, scalability, and full alignment with modern Shadcn and Tailwind workflows. This release introduces powerful abstractions, full theme support via Figma variables, responsive pro blocks, and a significantly improved design-to-code workflow.

Core Features

Light/Dark Mode via Variables

Full light and dark mode support powered by Figma variables. Switch modes instantly across the entire system while maintaining consistency across all components and blocks.

Theme System (Shadcn, Tweakcn, Custom)

A fully abstracted theme architecture that mirrors real-world Shadcn theming:

Switch between Shadcn default theme and Tweakcn themes
Create and apply custom themes
All colors and styling controlled through centralized theme variables
Update entire designs instantly without manual overrides
Ensures accurate design-to-code parity

Typography System with Tailwind Mapping

Typography rebuilt with full abstraction and flexibility:

Display and body text variables
Semantic text styles decoupled from font families
Support for different fonts for headings vs body content
Sans, Mono, and Cursive text style support
All text styles mapped directly to Tailwind text classes (text-sm, text-lg, font-medium, etc.)

Lucide Icons with Instance Swapping

All icons upgraded to latest Lucide versions:

Fully instance swappable via the Assets panel
Replace icons instantly without detaching components
Consistent implementation across the entire kit

Components

All components rebuilt from the ground up using latest Shadcn UI patterns:

Improved structural consistency
Better alignment with real Shadcn implementations
Clean layer naming and organization
Optimized for performance and maintainability

Includes all shadcn/ui base components:

Buttons, inputs, and form controls
Dialogs, popovers, and modals
Navigation components
Data display components
And more…

Pro Blocks System

500 Pro Blocks

500 professionally designed blocks fully integrated into the component system:

Hero sections
Feature sections
Pricing tables
Testimonials
Team sections
Footer layouts
And many more…

Variable-Controlled Responsive Breakpoints

All Pro blocks support responsive variants:

Breakpoint	Description
Desktop	Full-width layouts
Tablet	Medium breakpoint designs
Mobile	Responsive mobile layouts

Breakpoints controlled via Figma variables for consistent responsive behavior across the entire system.

Blocks as Swappable Components

All Pro blocks are:

Published in the Assets panel
Fully instance swappable
Organized with clean naming conventions
Structured with professional layer hierarchy

Rapidly prototype full pages by swapping blocks in seconds.

Theme Architecture

A two-layer variable system that separates brand identity from light/dark mode—switch themes and modes independently without duplicating components or blocks.

Theme + Mode Independence — Change theme or toggle dark mode separately. Four combinations (Default Light, Default Dark, Amber Light, Amber Dark) ship with the kit.
Instant Global Updates — Set theme and light/dark mode using variable modes at the page level and all 500+ blocks update automatically.
Add Custom Themes Easily — Add a column in the Theme collection, define tokens, done. New themes work immediately.
Add any shadcn compatible theme easily - Find a theme you like on tweakcn, shadcn or other sites, and simply add those css variables with the same names into a new column in the Theme variables panel
Real Shadcn Parity — Token names match actual Shadcn CSS variables. Clean developer handoff with no translation layer.

For a deep dive into the variable collections, data flow, and implementation details, see Theme System Architecture.

How to Access

The Figma Kit is included with Premium membership.

For Premium Members

Go to the Figma page
Click Download Figma Kit
Import the .fig file into Figma

Preview Before Purchasing

You can preview the Figma Kit before purchasing:

View Figma Preview