shadcn/ui Theme
미니멀한 블랙 팔레트, 정제된 타이포그래피, rounded 컴포넌트가 특징인 shadcn/ui 스타일입니다.
Buttons
Default, Secondary, Outline, Ghost, Destructive, Link, Sizes, States, Button Group
Variants
Sizes & States
Button Group
Chips & Badges
Solid, Bordered, Closable, Badge, Pill
Chips
Badges
Forms
Input, Select, Textarea, Checkbox, Radio, Switch, Range, Floating, Validation, Input Group
Basic Inputs
Check, Radio & Switch
Floating Labels
Input Group & Validation
Cards
Basic, Team, Payment, Image, Horizontal
Notifications
Push Notifications
Send notifications to your subscribers.
Team Members
Invite Members
Payment Method
Add New Card
Horizontal Card
좌우 레이아웃의 수평 카드입니다.
Avatars
Sizes, Status, Group
Sizes
Status & Group
Alerts
Default, Success, Warning, Danger, Dismissible
Standard
Dismissible
Progress & Spinners
Progress bar, Striped, Animated, Bootstrap spinners
Progress Bars
Spinners
Skeleton
Loading placeholders via Bootstrap placeholder
Table
Hover, Striped, Responsive
| Name | Role | Status | |
|---|---|---|---|
SD Sofia Davis |
sofia@example.com | Owner | Active |
JL Jackson Lee |
jackson@example.com | Member | Active |
AK Alice Kim |
alice@example.com | Member | Inactive |
| Color | Value |
|---|---|
| Primary | #18181b |
| Secondary | #f4f4f5 |
| Destructive | #ef4444 |
Accordion
Standard, Flush, Always-open
Standard
Flush & Always-open
Nav & Tabs
Tabs, Pills, Underline, Breadcrumb
Tabs
Overview 탭 내용입니다.
Analytics 탭 내용입니다.
Reports 탭 내용입니다.
Pills & Underline
Breadcrumb
Pagination
List Group
Basic, Active, Flush, Badge, Action
- 현재 활성 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
- 비활성화된 항목
- 알림14
- 메시지5
- 완료Done
Dropdown
Basic, Split, Dropup, Dropend, Header, Divider
Modal
Default, Small, Large, Centered, Scrollable
Offcanvas
Start, End, Top, Bottom
Toast
Default, Success, Warning, Danger
Tooltip & Popover
4 directions each
Tooltip
Popover
Carousel
Slides, Indicators, Controls
Utilities & Misc
Typography, Code, Divider, Kbd, Close Button
Code & Divider
const theme = 'shadcn'
console.log(`Hello ${theme}!`)Close Button