컴포넌트
@pelagornis/page/components에서 쓸 수 있는 모든 RefineUI 컴포넌트와 미리보기
아래 컴포넌트는 모두 @pelagornis/page/components에서 가져옵니다. 각 페이지에 미리보기, 예제 소스, MDX·Markdoc 사용법, 변형·구조·상태·키보드 정보가 있습니다.
레이아웃 9
- Box토큰 패딩, 배경, 모서리, 테두리를 갖춘 기본 레이아웃 표면입니다.
- Container토큰 패딩을 둔 가운데 정렬 페이지 열입니다.
- Grid고정 열 또는 자동 맞춤 최소 너비를 쓰는 CSS 그리드입니다.
- Stack간격에 spacing 토큰을 쓰는 한 방향 flex 레이아웃입니다.
- Spacer행이나 열 안에서 형제 요소를 밀어내는 유연한 간격입니다.
- Divider그룹 사이의 가로 구분선입니다. 가운데에 라벨을 넣을 수 있습니다.
- Text시맨틱 텍스트 토큰을 요소에 연결하는 타이포그래피 기본 요소입니다.
- Scroll Area토큰으로 꾸민 스크롤바를 가진 스크롤 컨테이너입니다.
- Resizable드래그할 수 있는 핸들로 나뉜 분할 패널입니다.
액션 6
폼 14
- Field라벨, 컨트롤, 도움말, 오류 메시지를 묶습니다.
- Label폼 컨트롤의 텍스트 라벨입니다. 필수 표시를 넣을 수 있습니다.
- Input오류와 성공 상태가 있는 한 줄 입력입니다.
- Textarea여러 줄 입력입니다.
- Search Field검색 아이콘과 지우기 버튼이 있는 검색어 입력입니다.
- Input OTP칸으로 나뉜 일회용 코드 입력입니다.
- Checkbox라벨과 설명을 붙일 수 있는 두 가지 중 하나의 선택입니다.
- Radio같은 name을 공유하는 그룹에서 하나를 고릅니다.
- Switch바로 적용되는 켜기·끄기 설정입니다. Toggle이라는 이름으로도 내보냅니다.
- Select팝오버 목록에서 값 하나를 고릅니다.
- Segmented Control서로 배타적인 선택지를 한 줄로 늘어놓습니다.
- Slider범위 안에서 숫자를 고릅니다.
- Spin Button증감 버튼이 있는 숫자 입력입니다.
- Calendar날짜나 기간을 고르는 월 단위 달력입니다.
내비게이션 9
- Breadcrumb현재 페이지까지 이어지는 링크 경로입니다.
- Navigation Menu드롭다운 패널을 둘 수 있는 최상위 사이트 내비게이션입니다.
- Pagination긴 목록의 페이지 사이를 이동합니다.
- Tabs한 공간을 나눠 쓰는 패널 사이를 전환합니다.
- Sidebar그룹이 있는 세로 내비게이션입니다. 문서 셸이 이 컴포넌트로 만들어져 있습니다.
- Stepper제목과 설명이 있는 번호 단계입니다.
- Progress Stepper여러 단계 흐름의 진행 상황을 간결하게 보여 줍니다.
- Tree파일이나 중첩 내비게이션을 위한 펼칠 수 있는 계층입니다.
- Footer브랜드, 링크 그룹, 메타 정보를 담은 사이트 푸터입니다. 문서 푸터가 이 컴포넌트를 씁니다.
피드백 7
오버레이 3
데이터 표시 11
- Avatar사람을 나타내는 사진, 이니셜, 아이콘입니다.
- Avatar Group겹치거나 펼친 아바타 묶음입니다. 넘치는 개수를 표시합니다.
- Card헤더, 내용, 푸터로 한 주제를 담는 컨테이너입니다.
- Chip작은 라벨이나 필터입니다. 지울 수 있게 만들 수 있습니다. Tag라는 이름으로도 내보냅니다.
- Bubble왼쪽이나 오른쪽에 붙는 채팅 메시지 말풍선입니다.
- Table구조화된 데이터를 위한 행과 열입니다.
- Chart플롯 기본 요소로 조합하는 막대·선 차트입니다.
- Carousel이전·다음 버튼과 인디케이터가 있는 슬라이드입니다.
- Accordion하나 또는 여러 개를 펼칠 수 있는 쌓인 섹션입니다.
- Collapsible트리거로 보이고 숨기는 섹션 하나입니다.
- IconWebIcon으로 아이콘 폰트에서 그리는 RefineUI 시스템 아이콘입니다.