Components
75개의 컴포넌트
@horon/web가 제공하는 컴포넌트 전부입니다. 목록의
점이 채워진 항목은 이 페이지에서 바로 동작하는 프리뷰를 제공하고, 나머지는 코드 예시와
Storybook 링크를 제공합니다.
- Total
- 75
- Live previews
- 74
- Groups
- 5
입력과 선택
사용자가 값을 입력하거나 선택지를 고르는 컨트롤입니다.
Button 동작을 실행하는 기본 버튼입니다. variant와 size로 계층과 크기를 정합니다. Button Group 여러 버튼을 하나의 표면으로 묶어 선택지를 나란히 보여줍니다. Input 한 줄 텍스트를 입력받는 기본 필드입니다. Input Group 인풋 앞뒤에 아이콘·접두사·버튼을 붙여 하나의 컨트롤로 묶습니다. Textarea 여러 줄 텍스트를 입력받습니다. Checkbox 여러 항목을 독립적으로 켜고 끄는 선택 컨트롤입니다. Radio Group 여러 선택지 중 하나만 고르는 그룹입니다. Switch 즉시 반영되는 켜짐·꺼짐 상태를 전환합니다. Slider 연속된 범위에서 값을 끌어 정합니다. Select 목록에서 하나를 고르는 드롭다운입니다. Native Select 플랫폼 기본 선택 상자를 그대로 사용합니다. Combobox 검색어로 목록을 좁혀 하나를 고릅니다. Autocomplete 입력하는 동안 후보를 제안합니다. Date Picker 달력에서 날짜를 고르는 입력 컨트롤입니다. Calendar 월 단위 달력 그리드입니다. Input OTP 한 글자씩 칸을 나눠 인증 코드를 입력받습니다. Form react-hook-form과 연결된 폼 필드 묶음입니다. Field 라벨·설명·오류를 하나의 필드로 묶는 레이아웃입니다. Label 컨트롤에 연결되는 접근성 라벨입니다. File Upload 끌어 놓기와 파일 선택을 지원하는 업로드 영역입니다. Attachment 첨부된 파일을 아이콘·이름·크기와 함께 보여줍니다. Questionnaire 여러 질문을 단계적으로 받는 설문 레이아웃입니다. Toggle 한 번 눌러 켜고 끄는 단일 상태 버튼입니다. Toggle Group 여러 토글을 묶어 하나 또는 여럿을 선택합니다.
표시
데이터와 상태를 화면에 보여주는 컨트롤입니다.
Alert 중요한 안내를 제목과 본문으로 강조해 보여줍니다. Badge 상태나 분류를 짧은 라벨로 표시합니다. Chip 필터·태그처럼 지우거나 고를 수 있는 작은 라벨입니다. Avatar 사용자나 대상을 원형 이미지와 이니셜로 표시합니다. Card 제목·본문·액션을 한 표면에 묶는 기본 컨테이너입니다. Table 행과 열로 데이터를 정렬해 보여줍니다. Data Table 정렬·필터·페이지 처리를 갖춘 표입니다. List 항목을 세로로 나열하는 목록입니다. Item 아이콘·제목·설명·액션을 한 줄에 배치합니다. Typography 제목·본문·캡션 등 타입 스케일을 적용하는 텍스트입니다. Kbd 키보드 입력을 키캡 모양으로 표시합니다. Code Block 코드를 복사 버튼과 함께 보여줍니다. Progress 작업의 진행률을 막대로 보여줍니다. Spinner 처리 중임을 알리는 회전 인디케이터입니다. Skeleton 콘텐츠가 로드되기 전 형태를 회색 면으로 보여줍니다. Empty 결과가 없을 때 아이콘과 안내 문구를 보여줍니다. Aspect Ratio 자식 요소의 가로세로 비율을 고정합니다. Separator 구획 사이를 나누는 얇은 선입니다. Marker 목록이나 타임라인의 위치를 표시합니다. Bubble 대화 말풍선을 보낸 사람 방향에 맞춰 그립니다. Message 보낸 사람·시간·본문을 갖춘 대화 메시지입니다. Message Scroller 대화 목록을 스크롤하며 최신 메시지로 이동합니다.
내비게이션
화면과 섹션 사이를 이동하는 컨트롤입니다.
오버레이
현재 화면 위에 떠서 맥락을 보조하는 표면입니다.
Dialog 화면 위에 뜨는 모달 대화상자입니다. Alert Dialog 되돌릴 수 없는 동작을 확인받는 대화상자입니다. Sheet 화면 가장자리에서 밀려 나오는 패널입니다. Drawer 모바일 하단에서 올라오는 시트입니다. Popover 트리거 옆에 뜨는 임의의 콘텐츠 패널입니다. Hover Card 마우스를 올리면 대상의 요약 카드를 띄웁니다. Tooltip 짧은 설명을 커서 옆에 띄웁니다. Dropdown Menu 트리거에서 펼쳐지는 메뉴 목록입니다. Context Menu 오른쪽 클릭 위치에 뜨는 메뉴입니다. Menu 공용 메뉴 프리미티브로 항목·구분선·단축키를 그립니다. Toast 짧은 알림을 화면 구석에 잠시 띄웁니다. Sonner sonner 기반 토스트 스택과 큐잉을 제공합니다.
레이아웃
콘텐츠를 배치하고 감싸는 구조 컴포넌트입니다.