HCToast UI

컴포넌트 & 토큰

개인 프로젝트에서 일관된 UI를 얻기 위한 디자인 시스템. day / night / night-city / night-lavender 네 테마, Pretendard 본문 + 고운바탕 제목, shadcn 레지스트리로 배포.

아래 명령을 그대로 붙여넣으면 설치됩니다. 각 컴포넌트는 tokens와 cn을 자동으로 함께 가져오므로 따로 받을 필요가 없습니다.

디자인 토큰

컴포넌트는 시맨틱 토큰만 참조한다. 원시 팔레트·임의값·dark: 클래스 금지.

npx shadcn@latest add https://hctoast-ui.vercel.app/r/tokens.json

색 토큰

bg
bg-inset
surface
surface-raised
action
action-hover
action-soft
accent
dangerwarningsuccessinfo

타이포 스케일

Display 40

Heading 1 · 32

Heading 2 · 24

Heading 3 · 20

Body large · 17

Body · 15

Body small · 13

Label · 13/600

Caption · 12

Code · 13 mono

모서리

8
12
16
24
∞

면 (elevation)

레벨 1 · 카드
레벨 2 · 팝오버
레벨 3 · 모달

Button

primary / secondary / ghost / danger / link · sm 32 · md 40 · lg 48

npx shadcn@latest add https://hctoast-ui.vercel.app/r/button.json

Badge

soft 6종 + solid 6종 · rounded-sm · 높이 20

npx shadcn@latest add https://hctoast-ui.vercel.app/r/badge.json
neutralactionsuccesswarningdangerinfo
neutralactionsuccesswarningdangerinfo

Dismiss

동그란 X · corner는 부모(relative) 오른쪽 위에 반쯤 걸침 · inline은 칩·태그 안 · sm 24 / md 32

npx shadcn@latest add https://hctoast-ui.vercel.app/r/dismiss.json
썸네일·카드 항목
md
필터: 완료태그

Card

레벨 1 면 · Header / Title / Description / Content / Footer

npx shadcn@latest add https://hctoast-ui.vercel.app/r/card.json
카드 제목
설명은 text-body-sm text-fg-muted.

border + shadow-e1 로 지면과 구분됩니다.

Input · Label

높이 40 · border-strong · rounded-md

npx shadcn@latest add https://hctoast-ui.vercel.app/r/input.json

Separator

horizontal / vertical · decorative 여부로 role 결정

npx shadcn@latest add https://hctoast-ui.vercel.app/r/separator.json

위 블록

아래 블록

A
B
C

Skeleton

animate-pulse · bg-bg-inset · prefers-reduced-motion 대응

npx shadcn@latest add https://hctoast-ui.vercel.app/r/skeleton.json

Dialog

레벨 3 면 · overlay 백드롭 · 포커스 트랩·ESC·스크롤 잠금은 Radix

npx shadcn@latest add https://hctoast-ui.vercel.app/r/dialog.json

Popover

레벨 2 면 · 위치·충돌 회피는 Radix

npx shadcn@latest add https://hctoast-ui.vercel.app/r/popover.json

Tooltip

레벨 2 면 · text-body-sm · 호버/포커스로 표시

npx shadcn@latest add https://hctoast-ui.vercel.app/r/tooltip.json

Select

트리거 40 · popper 포지션 · 스크롤 버튼 · 타이핑 검색은 Radix

npx shadcn@latest add https://hctoast-ui.vercel.app/r/select.json

Tabs

bg-bg-inset 트랙 + 활성 탭 surface-raised

npx shadcn@latest add https://hctoast-ui.vercel.app/r/tabs.json

개요 탭 콘텐츠.

Slider

Radix Slider 래퍼 · 손잡이 5종 · 드래그는 부드럽게, 놓으면 눈금에 스냅

npx shadcn@latest add https://hctoast-ui.vercel.app/r/slider.json
30
45
60
70
55
50

드래그 중엔 마우스를 그대로 따라오고, 놓으면 가까운 10 단위에 달라붙는다. 화살표는 10씩, Shift+화살표는 100씩. 라벨·값·트랙은 SliderField 가 한 열로 맞춘다.

40%

라벨도 값도 없으면 윗줄을 그리지 않는다 — 트랙 위에 빈 간격이 없다.