Design system
web
v1.0.0
90/100

Shadcn Product UI Kit

@dante · Reference Kit

Reference-grade shadcn/Tailwind system for product dashboards, forms, settings, and agent-facing admin tools, adapted from Open Design shadcn.

HTML/CSS
React
shadcn/ui
Tailwind
#product-ui
#react
#shadcn
#tailwind
Shadcn Product UI Kit
Downloads9
Download package
DESIGN.mdSKILL.md

Overview

Principles

  • Build product UI for repeated work: clear labels, visible state, compact controls, and fast scanning.
  • Prefer shadcn primitives for behavior and accessibility, then layer semantic tokens through Tailwind variables.
  • Keep repeated object cards at 8px radius or less; do not nest cards inside cards.
  • Every form control documents default, hover, focus-visible, disabled, and error states.
  • Every table/list surface documents loading, empty, error, populated, and edge states.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (22)

background
#F8FAFC
foreground
#0F172A
card
#FFFFFF
cardForeground
#0F172A
popover
#FFFFFF
popoverForeground
#0F172A
primary
#2563EB
primaryForeground
#FFFFFF
secondary
#E2E8F0
secondaryForeground
#1E293B
muted
#F1F5F9
mutedForeground
#64748B
accent
#14B8A6
accentForeground
#042F2E
destructive
#DC2626
destructiveForeground
#FFFFFF
border
#CBD5E1
input
#CBD5E1
ring
#2563EB
success
#16A34A
warning
#CA8A04
info
#0891B2

Typography (7)

display
Inter, Pretendard, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
heading
Inter, Pretendard, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
Inter, Pretendard, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
label
Inter, Pretendard, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
caption
Inter, Pretendard, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
scale
unparsed
{
  "h1": "32px/1.2",
  "h2": "24px/1.25",
  "h3": "18px/1.35",
  "body": "14px/1.6",
  "caption": "12px/1.45"
}

Components (15)

Button

Product UI component for clear command actions.

shadcn
shadcn/ui + Tailwind CSS
2 props · 6 states · 18 tags · 5 sources

Input

Product UI component for single-line fields.

shadcn
shadcn/ui + Tailwind CSS
2 props · 5 states · 16 tags · 4 sources

Textarea

Product UI component for long-form input.

shadcn
shadcn/ui + Tailwind CSS
1 props · 5 states · 13 tags · 4 sources

Select

Product UI component for bounded choices.

shadcn
Radix Select + Tailwind CSS
1 props · 6 states · 13 tags · 4 sources

Checkbox

Product UI component for independent options.

shadcn
Radix Checkbox + Tailwind CSS
1 props · 7 states · 11 tags · 4 sources

RadioGroup

Product UI component for exclusive choices.

shadcn
Radix Radio Group + Tailwind CSS
1 props · 6 states · 9 tags · 4 sources

Switch

Product UI component for immediate preferences.

shadcn
Radix Switch + Tailwind CSS
1 props · 5 states · 10 tags · 4 sources
Missing states: error

Card

Product UI component for repeated content groups.

shadcn
shadcn/ui + Tailwind CSS
1 props · 6 states · 14 tags · 4 sources

Dialog

Product UI component for focused blocking decisions.

shadcn
Radix Dialog + Tailwind CSS
1 props · 4 states · 13 tags · 4 sources
Missing states: default, hover, focus-visible, disabled

DropdownMenu

Product UI component for secondary contextual actions.

shadcn
Radix Dropdown Menu + Tailwind CSS
1 props · 5 states · 13 tags · 4 sources
Missing states: default

Tabs

Product UI component for peer views in one context.

shadcn
Radix Tabs + Tailwind CSS
1 props · 5 states · 11 tags · 4 sources

Table

Product UI component for structured records.

shadcn
HTML table + Tailwind CSS
1 props · 7 states · 14 tags · 4 sources
Missing states: disabled

Badge

Product UI component for compact metadata.

shadcn
shadcn/ui + Tailwind CSS
1 props · 4 states · 18 tags · 4 sources

Alert

Product UI component for inline status and validation.

shadcn
shadcn/ui + Tailwind CSS
1 props · 3 states · 13 tags · 4 sources
Missing states: hover, disabled

Toast

Product UI component for non-blocking feedback.

shadcn
Sonner or shadcn Toast + Tailwind CSS
1 props · 3 states · 12 tags · 4 sources
Missing states: default, hover, focus-visible, disabled

DESIGN.md

Principles

  • Build product UI for repeated work: clear labels, visible state, compact controls, and fast scanning.
  • Prefer shadcn primitives for behavior and accessibility, then layer semantic tokens through Tailwind variables.
  • Keep repeated object cards at 8px radius or less; do not nest cards inside cards.
  • Every form control documents default, hover, focus-visible, disabled, and error states.
  • Every table/list surface documents loading, empty, error, populated, and edge states.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions