디자인 시스템
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
다운로드9
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (7)

display
Inter, Pretendard, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
Inter, Pretendard, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
Inter, Pretendard, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
label
Inter, Pretendard, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
caption
Inter, Pretendard, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
scale
unparsed
{
  "h1": "32px/1.2",
  "h2": "24px/1.25",
  "h3": "18px/1.35",
  "body": "14px/1.6",
  "caption": "12px/1.45"
}

컴포넌트 (15)

Button

Product UI component for clear command actions.

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

Input

Product UI component for single-line fields.

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

Textarea

Product UI component for long-form input.

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

Select

Product UI component for bounded choices.

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

Checkbox

Product UI component for independent options.

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

RadioGroup

Product UI component for exclusive choices.

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

Switch

Product UI component for immediate preferences.

shadcn
Radix Switch + Tailwind CSS
1 props · 5 states · 10 tags · 4 소스
누락 상태: error

Card

Product UI component for repeated content groups.

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

Dialog

Product UI component for focused blocking decisions.

shadcn
Radix Dialog + Tailwind CSS
1 props · 4 states · 13 tags · 4 소스
누락 상태: 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 소스
누락 상태: default

Tabs

Product UI component for peer views in one context.

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

Table

Product UI component for structured records.

shadcn
HTML table + Tailwind CSS
1 props · 7 states · 14 tags · 4 소스
누락 상태: disabled

Badge

Product UI component for compact metadata.

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

Alert

Product UI component for inline status and validation.

shadcn
shadcn/ui + Tailwind CSS
1 props · 3 states · 13 tags · 4 소스
누락 상태: hover, disabled

Toast

Product UI component for non-blocking feedback.

shadcn
Sonner or shadcn Toast + Tailwind CSS
1 props · 3 states · 12 tags · 4 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전