naeil-ui

Design System Showcase — Tokens · Components · Themes

ReactTailwind v4OKLCHshadcn/ui

GitHub npm

Foundations

Actions and selection use neutral semantic colors in both themes. Focus and feedback have separate roles.

Neutral action

primary / primary-foreground

Selection

Preview

surface-selected / foreground

Focus

Preview

ring

Colors — Semantic

These roles follow the active light or dark theme. Colors below are read from the shared CSS variables.

background

foreground

card

card-foreground

popover

popover-foreground

primary

primary-foreground

primary-hover

surface-selected

secondary

secondary-foreground

muted

muted-foreground

accent

accent-foreground

border

border-strong

input

ring

success

success-bg

warning

warning-bg

error

error-bg

info

info-bg

Colors — Primitive

Primitive palettes remain available for compatibility. The blue scale is a legacy primitive, not the default action color.

Gray

100

200

300

400

500

600

700

800

900

950

Legacy blue primitive

100

200

300

400

500

600

700

800

900

950

Destructive

100

200

300

400

500

600

700

800

900

950

Colors — Project

Project colors identify individual products. They do not replace shared action, focus, or selection roles.

pkm

naeilUi

baby

Typography

Pretendard for Korean and Latin UI, Noto Sans JP for Japanese. Monospace samples use the configured fallback stack.

Page title

PageTitle · 2rem · 600

Section title

SectionTitle · 1.25rem · 600

xs · 0.8125remTomorrow begins here.

sm · 0.875remTomorrow begins here.

base · 1remTomorrow begins here.

lg · 1.125remTomorrow begins here.

xl · 1.25remTomorrow begins here.

2xl · 1.5remTomorrow begins here.

3xl · 2remTomorrow begins here.

4xl · 2.25remTomorrow begins here.

Monospace fallback

JetBrains Mono, Geist Mono, ui-monospace, monospace

const x = 42;

400 Regular — Body text

500 Medium — Labels and controls

600 Semibold — Page and section titles

Spacing

0

0px

1

4px

2

8px

3

12px

4

16px

5

20px

6

24px

8

32px

10

40px

12

48px

16

64px

Radius

Tags use 4px corners, controls 8px, and panels 12px.

none · 0px

sm · 4px

md · 8px

lg · 12px

Shadow

shadow-sm

shadow-md

Button

Interactive

variant

size

Disabled

variant="default" size="default"

Variants

Sizes

States

Input

Interactive

DisabledInvalid input

Example input

Change the controls to compare input states.

Card

System status

Example service information

All services are operating normally.

Deployment log

Example release history

v0.6.0 — Phase 6 Demo

v0.5.0 — Core Components

CardElevated

Raised surfaces use the card-elevated role and a subtle shadow.

Dialog

DropdownMenu

Sonner (Toast)

Badge

DefaultSecondaryOutlineDestructive

Avatar

Sizes

SSCLG

AvatarBadge

SCJM

AvatarGroup

ABC