naeil-ui

디자인 시스템 쇼케이스 — 토큰 · 컴포넌트 · 테마

ReactTailwind v4OKLCHshadcn/ui
GitHub →

Accent

프로젝트별 악센트 색상 주입. 아래 프리셋을 선택하면 모든 accent 토큰이 즉시 변경됩니다.

Colors — Primitive

Gray

50
100
200
300
400
500
600
700
800
900
950

Accent (Blue default)

50
100
200
300
400
500
600
700
800
900
950

Destructive

50
100
200
300
400
500
600
700
800
900
950

Colors — Semantic

현재 테마(다크/라이트)에 따라 매핑이 변경됩니다.

background
foreground
card
card-foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
destructive
destructive-foreground
border
border-subtle
border-subtle-hover
surface-subtle
input
ring

Colors — Project

프로젝트별 악센트 색상. 라이트/다크 동일.

CC
SA
PKM
naeil-ui
Baby Agent

Heading Primitives

공통 헤딩 컴포넌트로 모든 페이지의 제목 스케일을 통합 관리.

PageTitle

System-level page heading

text-4xl → lg:text-5xl

SectionTitle

Section heading baseline

text-lg

Typography

Sans (Pretendard)

xs가나다라 ABCabc 012
sm가나다라 ABCabc 012
base가나다라 ABCabc 012
lg가나다라 ABCabc 012
xl가나다라 ABCabc 012
2xl가나다라 ABCabc 012
3xl가나다라 ABCabc 012
4xl가나다라 ABCabc 012

Mono (JetBrains Mono)

xsconst x = 42; // →
smconst x = 42; // →
baseconst x = 42; // →
lgconst x = 42; // →
xlconst x = 42; // →

Weights

400 Regular — 기본 텍스트 본문500 Medium — 강조 라벨700 Bold — 제목 헤딩

Spacing

0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px

Radius

none (0px)
sm (2px)
md (4px)
lg (8px)

Shadow

shadow-sm
shadow-md

Button

Variants

Sizes

States

Input

Card

시스템 상태
현재 시스템 운영 정보

모든 서비스가 정상 운영 중입니다.

배포 로그
최근 배포 히스토리

v0.6.0 — Phase 6 Demo

v0.5.0 — Core Components

Elevated

Elevated Card
다크 모드에서 밝기 차이로 elevation 표현

shadow-sm + 다크 배경 밝기 상승

Dialog

Dropdown Menu

Sonner (Toast)

Badge

DefaultSecondaryOutlineDestructive

Avatar

Sizes

SSCLG

With Badge

SCJM

Group

ABC
+5