Radix UI 데쉬보드 컴포넌트
사용자 정의 컬러
Accordion
Alert Dialog
Aspect Ratio
16:9
1:1
Autocomplete
Autocomplete Multi
Avatar
Badge
Button
기본 버튼
Disabled
Callout
정보
이것은 정보를 전달하는 콜아웃입니다. 중요한 내용이나 팁을 표시할 때 사용합니다.
성공
작업이 성공적으로 완료되었습니다.
경고
주의가 필요한 사항입니다. 이 작업은 되돌릴 수 없을 수 있습니다.
오류
오류가 발생했습니다. 다시 시도해주세요.
중립
일반적인 정보나 알림을 표시합니다.
Checkbox
Checkbox Cards
Collapsible
Context Menu
Data List
- 이름
- 홍길동
- 이메일
- hong@example.com
- 전화번호
- 010-1234-5678
- 주소
- 서울특별시 강남구
Date Picker
One-Time Password Field
Password Toggle Field
Date Range Picker
DateTime Picker
Dialog
기본 모달
큰 모달
전체 화면 모달
스크롤 가능한 모달
Dropdown Menu
Hover Card
Icon Button
Inset
이것은 Inset 컴포넌트 예시입니다.
내용이 중첩된 컨테이너 안에 표시됩니다.
Label
상하 배치
좌우 배치
필수 항목 표시
Menubar
Navigation Menu
No Data
데이터 목록
데이터가 없습니다
새로운 데이터를 추가해보세요
검색 결과
Popover
Progress
Radio Cards
Radio Group
Radius Examples
Button Radius Variants
Input Radius Variants
Card Radius Variants
None
radius="none"
Small
radius="small"
Medium
radius="medium"
Large
radius="large"
Switch with Different Radius
Checkbox with Different Radius
Scroll Area
Segmented Control
선택된 값: 전체
Select
Separator
수평 Separator
수직 Separator
텍스트와 함께
두께별 Separator
Skeleton
Slider
Spinner
크기별 Spinner
색상별 Spinner
버튼 내 Spinner
Switch
현재 상태: 비활성화됨
Table
| 이름 | 이메일 | 역할 | 상태 |
|---|---|---|---|
| 홍길동 | hong@example.com | 관리자 | 활성 |
| 김철수 | kim@example.com | 사용자 | 활성 |
| 이영희 | lee@example.com | 사용자 | 비활성 |
Tabs
Text Area
Text Field
Toast
Toggle
Toggle Group
단일 선택
다중 선택
Tooltip
Typography - Blockquote
"이것은 인용구입니다. 중요한 내용이나 영감을 주는 문구를 표시할 때 사용합니다."
Typography - Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Typography - Text Styles
일반 텍스트
굵은 텍스트
기울임 텍스트
밑줄 텍스트
코드 텍스트이것은 강조된 텍스트와 기울임 텍스트가 코드와 함께 있는 예시입니다.
윗첨자: E=mc2, H2SO4, x3 + y2
아래첨자: H2O, CO2, log10
특수문자: © 2026, ® 등록상표, ™ 상표, € 100, £ 50, ¥ 1000, § 1, ¶ 1, †, ‡
이모지: 😀 🎉 ⭐ 🚀 💡 🎨 ✨ 🔥 💯
Validation
올바른 이메일 형식이 아닙니다
비밀번호는 최소 8자 이상이어야 합니다
올바른 전화번호 형식이 아닙니다 (예: 010-1234-5678)
이름을 입력해주세요
사용 가능한 사용자명입니다
좌우 배치 (에러)
올바른 이메일 형식이 아닙니다