New16 dashboards and 17 apps, now in Figma

Shadcn UI Design System
for Figma

Design faster with 16 admin dashboards, 550+ blocks and 60 shadcn/ui components. Hand off Tailwind CSS v4 tokens your developers already use and ship the same screen in hours, not days.

Get All Access View Live Demo
AMVKM
Loved by 2,000+ developers
Admin dashboards
16
Web apps
17
AI apps
4
Extra pages
30
Blocks
550+
Core shadcn/ui components
60
Component and block variants
100s
Chart types
6
Icon libraries
5
Under the hood

A Design System, Not Just Screens

The screens sit on a complete shadcn/ui design system you can use for your own pages.

  • Full shadcn/ui component library

    Buttons, inputs, tables, charts, sidebars and 60+ other components with every variant, size and state you get in code.

  • Tailwind CSS v4 variables

    Colors, spacing, radius and typography live in variables that use the official shadcn token names, so handoff needs no translation.

  • Light and dark modes

    Every screen switches theme through a variable mode. No duplicated frames, no hand-picked dark colors.

  • Desktop, tablet and mobile

    Breakpoints follow the Tailwind classes in the code: stacked cards, hidden columns and drawers appear exactly where they do in the app.

  • Componentized screens

    Cards, rows, list items and message bubbles are local components, so a change in one place updates every screen that uses it.

  • Five icon libraries

    Lucide, Tabler, HugeIcons, Phosphor and Remix Icon as components you can swap from the properties panel.

  • Ready-made blocks

    550+ marketing, ecommerce, application and dashboard blocks, each with desktop, tablet and mobile variants and a dark preview.

  • Charts from shared parts

    Area, bar, line, pie, radar and radial charts built from the same grid, legend, tooltip and dot components.

  • Text and effect styles

    Text styles for the full type scale plus shadow, inset shadow and blur styles that mirror the Tailwind utilities.

Features

Everything You Need in One File

Components, slots, responsive screens, themes and tokens that match the code, so you can design new pages without starting from a blank frame.

  • Button component in Figma with sizes from xs to icon-lg and states from default to pressed
    Components

    Every Variant, Size and State

    Components are built the way shadcn/ui ships them. A single Button covers six variants, eight sizes and six states, from hover and focus to loading and disabled.

    • Switch variant, size and state from the properties panel
    • Icons, labels and shortcuts exposed as component properties
    • Newer components like Bubble, Attachment and Questionnaire included
  • Slots

    Slots for Your Own Content

    Cards, dialogs and blocks come with slots. Drop any component, block or element of your own into a slot and it takes the padding, spacing and theme of its parent.

    • Pick an instance from the slot and place it in seconds
    • Swap slot content without detaching the parent component
    • Mix kit components with your own design elements
  • Responsive

    Responsive From Desktop to Mobile

    Screens are designed for every screen size. Columns stack, sidebars collapse and tables adapt at the same breakpoints the Tailwind classes use in the code.

    • Desktop, tablet and mobile variants for every screen
    • Breakpoints match sm, md and lg in the codebase
    • Resize a frame to preview layouts between breakpoints
  • Themes

    Light and Dark From One Switch

    Screens switch theme through a variable mode. Change the mode on a frame and every color updates, with no duplicated frames to keep in sync.

    • Light and dark values for every color token
    • Charts, badges and tables follow the active mode
    • Your own theme colors carry over to both modes
  • Figma variables panel showing the Theme collection with light and dark color tokens mapped to Tailwind colors
    Style guide

    Tokens With the Same Names as Your CSS

    Colors, fonts, radius and shadows are variables and styles that mirror globals.css, with a light and dark value for every color.

    • Color tokens from background and primary to chart and sidebar colors
    • Font family, font weight and text styles for the whole type scale
    • Radius, shadow, blur and breakpoint values in one place
Design to code

Built From the Code, Not Next to It

Most Figma kits are drawn first and coded later, and the two drift apart. This file was rebuilt from the Next.js admin dashboard, so designers and developers look at the same thing.

  • Rebuilt from the codebase

    Each screen was recreated from the Next.js source: same copy, same data, same component variants.

  • One theme, two tools

    Change a variable in Figma and the matching CSS variable in globals.css. Design and code keep the same look.

  • Auto layout everywhere

    Frames resize and reflow like the real layout, so you can test longer content without breaking the design.

How it works

From Mockup to Production in Three Steps

The Figma file and the Next.js dashboard share one structure, so a design turns into a page without a rebuild.

  1. Design in Figma

    Start from a dashboard or app screen and adjust it with the same components and variables.

  2. Hand off without drift

    Developers read the token and component names they already use. Nothing to guess or redraw.

  3. Ship the same screen

    Open the matching page in the Next.js admin dashboard and build on code that already looks like the design.

Reviews

What are people saying about the Shadcn UI Kit?

Vladimir Deev
Vladimir Deev
@vdeev7路Follow

Replying to @TobyBelhome

Absolutely love it, thank you very much, Toby, for great job!

5:32 PM 路 Feb 27, 2026

1ReplyCopy link
Read more on X
Daniel Humphreys
Daniel Humphreys
@alias_labs_路Follow

Replying to @TobyBelhome and @shadcn

馃馃 legend! Love the kit bro, thanks for constantly delivering!

10:50 PM 路 May 29, 2025

1ReplyCopy link
Read more on X
SHARIAR
SHARIAR
@shariar_design路Follow

Replying to @TobyBelhome

Next level work bro馃敟 keep going.

9:48 AM 路 Feb 28, 2026

ReplyCopy link
Read more on X
Marshall
Marshall
@mdnlabs路Follow

Replying to @TobyBelhome

First time seeing this product... Couldn't believe my eyes. I bought within 5 minutes. Thank you for providing this.

4:36 AM 路 Dec 7, 2025

2ReplyCopy link
Read more on X
Mohamed Kondombo
Mohamed Kondombo
@mkmastery99路Follow

Replying to @TobyBelhome

The work you do is really great. Quality work 馃グ馃グ馃グ

12:47 AM 路 Dec 7, 2025

2ReplyCopy link
Read more on X
Kevin Usadadiya
Kevin Usadadiya
@Kevin_Usadadiya路Follow

Replying to @TobyBelhome

I just discovered you from one of my colleague, great work.

7:05 AM 路 Dec 7, 2025

1ReplyCopy link
Read more on X
VEERA SRIVASTAVA | UI/UX DESIGN COACH
VEERA SRIVASTAVA | UI/UX DESIGN COACH
@VeeraSrivastava路Follow

Replying to @TobyBelhome and @shadcn

Your dashboard hit the sweet spot 馃幆 between helpful and magnificent.

3:42 AM 路 Apr 15, 2025

2ReplyCopy link
Read more on X
Nima
Nima
@Nimmortal7路Follow

Replying to @TobyBelhome and @shadcn

Great work 馃敟

1:51 PM 路 Mar 19, 2025

1ReplyCopy link
Read more on X
Alejandro Martinez
Alejandro Martinez
@lyricalstring路Follow

Replying to @TobyBelhome and @shadcn

I use the shadcn ui kit pretty often and it's crazy what people build with it, good job 馃憦馃徎

12:49 PM 路 Dec 7, 2024

ReplyCopy link
Read more on X
Sa茂d Aitmbarek
Sa茂d Aitmbarek
@SaidAitmbarek路Follow

Replying to @TobyBelhome and @shadcn

looks really clean ;)

10:31 AM 路 Dec 7, 2024

1ReplyCopy link
Read more on X
Sadman Shakib
Sadman Shakib
@drsadmanshakib路Follow

Replying to @TobyBelhome and @shadcn

Wow looks really cool

11:14 AM 路 Mar 6, 2025

ReplyCopy link
Read more on X
Flo
Flo
@Flo_oskar路Follow

Replying to @TobyBelhome and @shadcn

Uff exactly what I was looking for in shadcn

1:48 PM 路 Mar 6, 2025

1ReplyCopy link
Read more on X
Elijah||Software Engineer
Elijah||Software Engineer
@ElijahNdenwa1路Follow

Replying to @TobyBelhome and @shadcn

This looks neat.

8:52 PM 路 May 9, 2025

ReplyCopy link
Read more on X
alex.xyz
alex.xyz
@alex___xyz路Follow

Replying to @TobyBelhome and @shadcn

Sleek UI, mate! Loving the design vibes! 馃憖

3:07 AM 路 Apr 6, 2025

1ReplyCopy link
Read more on X
Sarim Malik
Sarim Malik
@sarimrmalik路Follow

Replying to @TobyBelhome and @shadcn

The examples on your website are so good

12:18 AM 路 May 6, 2025

2ReplyCopy link
Read more on X
FAQ

Frequently asked questions

The Figma file is included in the Pro, Team and Enterprise plans together with the admin dashboards, templates, blocks and components. There is no separate purchase.

Yes. Every dashboard, app and page was rebuilt from the Next.js source with the same copy, data, components and breakpoints. The design system follows the structure of the Tailwind classes in the code, so a frame in Figma and the page in the browser give the same result. You can open the live demo of every screen to compare.

Spacing, padding and gaps use the Tailwind spacing scale, and colors, radius, typography, shadows and breakpoints are variables and styles named after the Tailwind and shadcn/ui tokens, such as background, text-sm, rounded-lg and shadow-sm. Auto layout settings mirror the flex and grid classes, so a developer can read the classes straight from the design.

16 admin dashboards, 17 web apps including AI apps, 30 extra pages such as profile, users, onboarding, authentication, notifications and error pages, 550+ blocks, 60 core shadcn/ui components with their variants, Tailwind CSS v4 variables, text and effect styles and five icon libraries.

Cards, dialogs and blocks have slots, empty areas inside a component. Pick any component, block or element of your own from the instance picker and drop it into the slot. It takes the padding, spacing and theme of the parent, and you never have to detach the component.

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

Yes. Colors, radius and fonts are variables. Change them in the Theme collection and every component and screen updates in both light and dark modes. Apply the same values to the CSS variables in globals.css and the code matches the design.

Yes. Lucide is the default, and Tabler, HugeIcons, Phosphor and Remix Icon are included. Turn on the library you want in the Icon Library variable collection and the icons in every component switch with it.

Yes. New dashboards, screens and blocks are added to the Figma file as the code product grows. Shadcn UI Kit is a one-time payment and future updates are included.

Yes. 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.

Stop Redrawing What Is Already Built

Get the Figma file together with the Next.js admin dashboards, website templates, blocks and components. Pay once and get every future update.

Get All Access