FIND YOUR NEXT SCREEN

WooSign 사이트맵

React Web부터 React Native까지. 필요한 문서와 컴포넌트로 바로 이동하세요.

홈↗시작하기↗React Native · iOS & Android↗디자인 토큰↗컴포넌트 갤러리↗

50개 컴포넌트

기본 요소

Button명확한 다음 행동을 만드는 버튼 Text읽기 편한 텍스트와 타이포그래피 Badge작지만 명확한 상태 표시 Chip가볍게 선택하는 필터 Pill둥근 형태의 선택 요소 Eyebrow제목 위에 놓는 작은 맥락 StatusDot색상으로 전하는 상태 Divider내용을 구분하는 선 Fab항상 가까이 있는 주요 행동

레이아웃

Box일관된 간격을 만드는 레이아웃 Card정보와 행동을 담는 카드 FeatureBand강조할 이야기를 위한 영역 AspectRatio일정한 비율을 유지하는 콘텐츠 ScrollArea긴 콘텐츠를 위한 스크롤 영역 ListItem반복되는 정보를 정리하는 행

폼과 입력

Input한 줄 텍스트 입력 Textarea여러 줄의 생각을 담는 입력 Select목록에서 하나를 선택 Checkbox여러 항목을 자유롭게 선택 Radio선택지 중 하나를 결정 Switch설정을 켜고 끄는 스위치 Label입력의 목적을 설명하는 레이블 FormField설명과 오류를 함께 보여주는 필드 Slider범위 안에서 값을 조절 InputOTP인증 번호를 나누어 입력 Combobox검색으로 빠르게 찾는 선택지 Calendar날짜를 한눈에 확인하고 선택 DatePicker필요할 때 열어 쓰는 날짜 선택

탐색

Tabs관련 콘텐츠 사이를 이동 Breadcrumb현재 위치와 상위 경로 Pagination페이지 단위로 콘텐츠 탐색 SegmentedControl짧은 선택지를 나란히 배치 Toggle하나의 상태를 전환 ToggleGroup여러 상태를 묶어서 선택

피드백

Avatar사람을 표현하는 프로필 AvatarGroup함께하는 사람들의 모음 Skeleton콘텐츠를 기다리는 자리 Spinner진행 중인 작업 표시 Progress완료까지의 진행 상황 Alert놓치면 안 되는 안내 EmptyState첫 행동을 돕는 빈 화면 Toast작업 결과를 짧게 전달

오버레이

Dialog집중이 필요한 확인과 선택 BottomSheet아래에서 올라오는 보조 화면 Drawer옆에서 펼치는 추가 정보 Tooltip요소에 대한 짧은 설명 Popover맥락 안에서 보여주는 추가 정보 DropdownMenu필요한 행동을 모아 놓은 메뉴 Accordion정보를 필요한 만큼 펼치기 Collapsible한 영역을 접고 펼치기