Figma UI Kit

The Shadcn UI Kit Figma file is a design system built from the same code you get in the kit. It includes the admin dashboards, web apps and extra pages, ready-made blocks and the core shadcn/ui components, with Tailwind CSS v4 variables, light and dark modes and desktop, tablet and mobile layouts.

You can preview the file in your browser on the Figma UI Kit page.

Get the file

The Figma file is included in the Pro, Team and Enterprise plans. There is no separate purchase.

  1. Sign in and open your account.
  2. Find the Figma File card under Tools you have.
  3. Click Duplicate to Figma. Figma opens and saves a copy of the file to your drafts.
  4. Move the copy to a project or team in Figma if you want to share it.

Your copy is yours to edit. When we release an update, duplicate the file again from your account to get the new version.

We recommend Figma Professional or higher. The file opens on every plan, but variable modes, which power light and dark themes, and publishing a team library are limited on the free Starter plan.

What is inside

  • Admin dashboards and apps: every dashboard, web app and AI app from the code, plus extra pages such as profile, users, onboarding, authentication, notifications and error pages.
  • Blocks: marketing, ecommerce, application and dashboard blocks, each with desktop, tablet and mobile variants and a dark preview.
  • Components: 60 core shadcn/ui components with every variant, size and state. Each component page links to its code on shadcnuikit.com.
  • Charts: area, bar, line, pie, radar and radial charts built from shared grid, legend, tooltip and dot components.
  • Styles and variables: the Tailwind CSS scale (spacing, sizes, radius and more), theme colors with light and dark values, responsive heading sizes for desktop and mobile, text styles and shadow, inset shadow and blur effects.
  • Icons: Lucide, Tabler, HugeIcons, Phosphor and Remix Icon.

Light and dark mode

Every color is a variable with a light and a dark value. To switch a screen, select the frame and change the 3. Mode collection from Light to Dark in the right panel. Charts, badges, tables and every nested component follow the active mode, so there are no duplicated dark frames to keep in sync.

Change the theme

Colors, radius and fonts live in the 2. Theme variable collection and use the same names as the CSS variables in globals.css. Each color has a light and a dark variable, for example colors/primary-light and colors/primary-dark.

  1. Open the local variables and select the 2. Theme collection.
  2. Change the light and dark values of the colors you want.
  3. Every component and screen updates in both modes.
  4. Apply the same values to globals.css in your project, so the code matches the design.

You can create the CSS for your theme with the Theme Generator.

Switch the icon library

Lucide is the default. The 5. Icon Library collection has one on and off variable for each library: Lucide Icons, Tabler Icons, HugeIcons, Phosphor Icons and Remix Icon. Open the local variables, turn on the library you want and turn off Lucide Icons. Icons in every component switch with it.

Use slots

Cards, dialogs and blocks have slots, empty areas inside a component. Select the slot, pick any component, block or element of your own from the instance picker and place it. The content takes the padding, spacing and theme of its parent, and you never have to detach the component.

Responsive layouts

Screens and blocks come in desktop, tablet and mobile variants. Breakpoints follow the sm, md and lg classes in the code, so columns stack, sidebars collapse and tables adapt at the same widths. Frames use auto layout, so you can resize them to preview the layout between breakpoints.

Hand off to developers

The file follows the structure of the Tailwind classes in the code:

  • Spacing, padding and gaps use the Tailwind spacing scale.
  • Colors, radius, text and shadow tokens are named after the Tailwind and shadcn/ui classes, such as bg-background, text-sm, rounded-lg and shadow-sm.
  • Auto layout settings mirror the flex and grid classes.

A developer can find the matching block or component on shadcnuikit.com, install it with the Shadcn CLI and get the same result as the frame. With the MCP Server and AI Skills, an AI editor can build the screen from the same kit items.

License

You can use the Figma file in personal and commercial projects, including client work. Pro is for one user, Team covers 10 users and Enterprise has no user limit. Do not share or resell the file or your copy of it outside your license. See the License page for the full terms.

TemplatesIllustrations