컴포넌트
58개의 컴포넌트. 각 카드의 미리보기를 클릭하면 라이브 예제와 props API 표가 있는 상세 페이지로 이동합니다.
Foundation
10개
Typography
Heading(h1~h6), Text, Lead, Muted, Code — 한·영 단일 폰트(Pretendard)의 시각 위계.
Separator
Radix Separator 기반 가로/세로 구분선.
AspectRatio
자식 요소를 지정한 비율로 고정. Radix Primitive 그대로 re-export.
Skeleton
로딩 플레이스홀더. prefers-reduced-motion에서 펄스 애니메이션 즉시화.
Spinner
회전 SVG 인디케이터. role="status" + sr-only 라벨 자동.
Empty
빈 상태 컨테이너 — 아이콘/제목/설명/액션 슬롯 합성.
Avatar
사용자 아바타. 이미지 로드 실패 시 자동으로 fallback 표시 (Radix).
Badge
상태/카테고리/카운트를 표현하는 작은 라벨. 색만으로 의미 전달 금지.
Kbd
키보드 단축키 표시 — 시맨틱 <kbd> 사용으로 스크린리더가 인지.
Label
폼 컨트롤 라벨. htmlFor로 클릭 시 컨트롤 포커스 이전 (Radix).
Buttons & Toggles
4개
Button
5 variants × 3 sizes. asChild로 <a>·next/link 합성. loading=true면 자동으로 Spinner + disabled + aria-busy.
ButtonGroup
여러 Button을 묶어 인접 보더를 합치는 그룹 컨테이너. role="group".
Toggle
단일 on/off 버튼 (Radix Toggle). aria-pressed 자동 관리, Space/Enter로 토글.
ToggleGroup
Toggle을 묶어 단일/다중 선택 그룹 구성 (Radix). 화살표 키로 항목 이동.
Inputs
9개
Input
단일 라인 텍스트 입력. leftAdornment/rightAdornment, error 상태(aria-invalid), Field context 자동 픽업, 한글 IME 안전.
InputGroup
Input + Button + Icon을 한 줄로 묶고 인접 보더를 머지.
InputOTP
N자리 코드(예: 6자리 OTP) 입력. 자동 advance, paste 분배, 한글 IME 패턴 차단(기본 숫자만).
Textarea
다중 라인 텍스트. autoResize + maxRows 지원, 한글 IME 안전.
Field
라벨/설명/에러/컨트롤을 묶는 표준 폼 래퍼. React Context로 자식 input에 id·aria-*·disabled를 자동 주입.
Checkbox
Radix Checkbox. checked={true | false | "indeterminate"} 모두 지원.
RadioGroup
단일 선택 그룹 (Radix). 화살표 ↑↓←→로 항목 이동.
Switch
Radix Switch (role="switch"). Space/Enter로 토글.
Slider
단일/범위 값 슬라이더 (Radix). 화살표/PageUp/Down/Home/End 키 지원.
Selection
6개
Select
single / multiple / searchable 3 모드를 단일 컴포넌트로. cmdk + Popover 기반, IME 안전.
NativeSelect
브라우저 native <select> 래퍼. 모바일/저사양 폴백 + Field context 픽업.
Combobox
자유 입력 + 자동완성. allowFreeText로 후보 없는 값 허용 가능.
Command
cmdk 기반 ⌘K 팔레트. Input/List/Empty/Group/Item/Separator 합성.
Calendar
react-day-picker v9 래퍼. mode="single" / "multiple" / "range" 지원, 토큰 기반 클래스 매핑.
DatePicker
Calendar + Popover 조합 — 트리거 클릭 시 캘린더 팝오버.
Layout
6개
Card
콘텐츠 그루핑 컨테이너. variant: default/outlined/elevated.
Item
리스트 단일 항목. startSlot/endSlot, selected/disabled, asChild로 <a>/<button> 합성.
Sidebar
좌/우 collapsible 사이드 패널. controlled/uncontrolled, Trigger 자동 토글.
Resizable
react-resizable-panels 기반 분할 패널. 화살표 키로 리사이즈, splitter ARIA 패턴.
ScrollArea
Radix ScrollArea — navy 톤 커스텀 thumb. 네이티브 스크롤바 숨김.
Direction
RTL/LTR 컨텍스트 프로바이더. Radix DirectionProvider 함수형 래퍼.
Navigation
5개
Tabs
Radix Tabs. orientation horizontal/vertical, ←→/↑↓ 키로 탭 이동.
Breadcrumb
페이지 위계 네비. 마지막 항목은 BreadcrumbCurrent로 aria-current="page" 부여.
Pagination
1, 2, 3 … N 패턴 (current 좌우 siblings + 처음/끝). 모바일은 자동으로 "current/total" 단순 모드.
NavigationMenu
Radix NavigationMenu — 드롭다운 메뉴 + 단일 viewport 공유. ←→로 항목 이동.
Menubar
데스크톱 앱 가로 메뉴 (파일/편집/...). ←→로 메뉴 이동, ↓로 열기.
Overlay
9개
Dialog
Radix Dialog 모달. 백드롭 클릭/Esc 닫기, 포커스 트랩 + 트리거로 복귀, body 스크롤 lock.
AlertDialog
파괴적 액션 확인용. role="alertdialog", 백드롭 클릭으로 닫히지 않음.
Drawer
vaul 기반 모바일 친화 시트. 드래그로 닫기, snap point 지원.
Sheet
화면 가장자리(상/하/좌/우)에서 슬라이드. Radix Dialog + side variant.
Popover
Radix Popover 부유 패널. 트리거 클릭/포커스로 열기, Esc/외부 클릭으로 닫기.
HoverCard
호버로 열리는 정보 카드 (프로필 미리보기 등). 모바일에선 동작 안 함.
Tooltip
짧은 안내 툴팁. 호버/포커스 시 표시. **모바일 미동작** — 정보 전달엔 Popover 권장.
DropdownMenu
Radix DropdownMenu. 서브메뉴, 체크박스/라디오 항목, 단축키 라벨 지원.
ContextMenu
우클릭(또는 long-press) 컨텍스트 메뉴.
Feedback
4개
Alert
페이지 내 비차단 안내. variant=danger는 role="alert"+aria-live="assertive", 그 외 role="status"+aria-live="polite".
Toast
sonner 기반 의견적 래퍼. 앱 루트에 <ToastProvider /> 한 번 + 어디서나 useToast(). 동시 5개 + 큐.
Sonner
sonner Toaster 직접 노출. 풀 sonner API가 필요할 때 — subpath import 전용 (`@baneung-pack/ui/sonner`).
Progress
Radix Progress. 결정(value 0~100) / 비결정(value 생략) 모드. role="progressbar" + aria-valuenow 자동.
Data Display
5개
Accordion
Radix Accordion. type single/multiple, collapsible. ↑↓로 트리거 이동.
Collapsible
Radix Collapsible. 단일 영역의 단순 fold/unfold.
Table
시맨틱 <table> 래퍼 + Header/Body/Footer/Row/Head/Cell/Caption.
DataTable
@tanstack/react-table 기반. 정렬/페이지네이션/선택/컬럼 가시성, 빈 데이터 시 Empty 자동, controlled/uncontrolled.
Carousel
embla-carousel-react 기반. ARIA carousel 패턴, ←→/↑↓ 키, 스와이프(터치) 자동.