Documentation
Variables

Menu

Home Preview Pricing

Products

Figma Kit Pro Blocks Figma Plugin Templates Themes

Resources

Docs Academy Blog Roadmap Help & Contact

Legal

Licensing Agreement Terms & Conditions Privacy Policy Cookies

Components

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Button Group Calendar Card Carousel Chart Checkbox Collapsible Combobox Command Context Menu Data Table Date Picker Dialog Drawer Dropdown Menu Empty Field Form Hover Card Input Input Group Input OTP Item Kbd Label Menubar Navigation Menu Pagination Popover Progress Radio Group Resizable Scroll-area Select Separator Sheet Sidebar Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toggle Toggle Group Tooltip Typography

Landing Page Blocks

404 Sections Banners Bento Grids Blog Sections CTA Sections Contact Sections Empty LP Sections FAQ Sections Feature Sections Footers Gallery Sections Header Sections Hero Sections LP Navbars Landing Page Examples Logo Sections Patterns Pricing Sections Rich Text Sections Stats Sections Team Sections Testimonials Sections

Application Blocks

App Shells Application Examples Buttons Cards Description Lists Empty Sections Navbars Page Headers Section Footers Section Headers Sections Settings Sign in Sign up Table Headers

This project is independent and not affiliated with Figma or shadcn/ui.
Copyright © 2025 Matt Wierzbicki

Command Palette

Search for a command to run...

Figma Kit

Getting started
Variables
Theming
Components
Icons
Development
Updates

Registry

Pro Blocks
Templates
Themes

Plugin

Figma to shadcn/ui plugin

Variables

The shadcn/ui kit for Figma comes pre-configured with a comprehensive set of variables for color modes, spacing, radius, and widths. These variables ensure consistency and flexibility in your designs.