Catalog

Components

Base UI primitive 위에 빌드된 53개 React 컴포넌트. 복사해서 자유롭게 수정하세요.

Primitives · 7

사용자 액션을 트리거하는 가장 기본적인 컴포넌트.

여러 버튼·인풋·셀렉트를 하나의 연결된 그룹으로 묶음. nested·split·separator.

상태·카테고리·카운트 등을 한눈에 보여주는 작은 라벨.

사용자 프로필 이미지. 이미지 로드 실패 시 fallback.

콘텐츠 그룹을 시각적으로 분리하는 가로/세로 선.

콘텐츠 로딩 중 자리에 표시되는 placeholder.

관련된 정보를 그룹화해서 보여주는 컨테이너.

Form · 8

사용자 텍스트 입력 필드.

여러 줄 텍스트 입력 필드.

폼 요소의 접근성 향상을 위한 라벨.

켜고 끄는 단일 옵션 선택.

토글 형식의 켜고 끄기 컨트롤.

옵션 리스트에서 하나 선택. 키보드 네비게이션.

react-hook-form + zod 기반 폼 컴포넌트.

여러 옵션 중 하나만 선택.

Navigation · 9

관련된 콘텐츠를 같은 영역에서 전환해가며 보여줍니다.

접고 펼치는 콘텐츠 패널 컬렉션.

버튼을 클릭하면 펼쳐지는 옵션 메뉴.

데스크탑 앱 스타일의 가로 메뉴바.

현재 위치 + 상위 경로 네비게이션.

긴 리스트 분할 네비게이션.

키보드 우선 명령 팔레트. ⌘K 패턴.

확장 가능한 사이드 내비게이션. expanded / collapsed / offcanvas.

다단계 스텝 플로우(Stepper). 온보딩·체크아웃·폼 마법사.

Overlay · 6

사용자 주의를 끌어 추가 정보·확인을 받는 모달.

화면 가장자리에서 슬라이드되는 패널.

끌어내려(스와이프) 닫는 바텀 시트 패널. vaul 기반.

hover/focus 시 표시되는 짧은 정보 팝업.

주변에 위치하는 부유 패널.

hover 시 표시되는 미리보기 카드.

Feedback · 4

사용자 주의를 끄는 상황별 메시지 박스.

전역 토스트(알림) 컴포넌트.

작업의 진행 상태를 시각화하는 가로 바.

로딩 인디케이터. 사이즈 5단계 + 영역 오버레이.

Data · 11

구조화된 데이터를 행과 열로 표시하는 표.

테이블 상단 액션 바 — 검색·생성·삭제·정렬·필터·설정·인쇄.

Code 128 1D 바코드. 의존성 없이 SVG 로 렌더.

Barcode Scanner Dialog

카메라로 바코드·QR 을 스캔하는 다이얼로그. zxing 기반.

날짜 선택용 달력. react-day-picker 기반.

Date Range Picker

시작/종료 두 날짜 범위 선택.

범위 내 값 선택 컨트롤.

커스텀 스크롤바를 가진 스크롤 컨테이너.

비율 고정 박스. 이미지·비디오용.

사용자가 패널 크기 조정. 가로/세로/중첩.

recharts wrapper — Line / Bar / Area / Pie.

Enterprise · 8

Flexible Column Layout

반응형 1/2/3 column 마스터-디테일 레이아웃.

sticky title + 접힘 header + sticky footer 페이지.

variant + Go + Adapt Filters 필터 바.

text/select 팝오버를 테이블 헤더에 부착하는 컬럼 필터.

셀 클릭 시 input/select/switch 로 인라인 편집.

Object Identifier

코드 + 상태 배지 식별자. 테이블·헤더 공용.

값 + 단위/통화 + 상태 색 + 변동률 수치 표현.

positive/negative/critical/informative 의미별 색.