Component Showcase
Onul-D 컴포넌트 전체 목록
Component Showcase
Onul-D 컴포넌트 전체 목록
S
Powered by onul-d@0.1.0
아래 페이지의 모든 컴포넌트는 packages/onul-d 에서 직접 import 됩니다. 여기서 보이는 토큰·radius·variant 가 그대로 onulpick / onulbook / spike / onulbaby 에도 반영돼요.
onul-d
65 components
playground-only
4 (Next routing)
consumers
4 services
디자인 토큰 →
semantic / raw 레이어, 사용 예시까지 한 페이지에서
Colors
Grey Scale
50
100
200
300
400
500
600
700
800
900
Semantic Colors
Blue
Red
Green
Yellow
Teal
Purple
Typography
f42오늘 디자인 시스템
f34오늘 디자인 시스템
f28오늘 디자인 시스템
f24오늘 디자인 시스템
f20오늘 디자인 시스템
f18오늘 디자인 시스템
f17오늘 디자인 시스템
f16오늘 디자인 시스템
f15오늘 디자인 시스템
f14오늘 디자인 시스템
f13오늘 디자인 시스템
Avatar
Sizes
김
이
박
최
Status
온
자
바
오
AvatarGroup
김
이
박
+2
A
B
C
Card
Variants
Outlined 카드
Filled 카드
Elevated 카드
CardGrid
Grid Item 1
Grid Item 2
Grid Item 3
StatCard
↑+12.5%
₩12.4M
총 매출
↑+8.3%
1,234
신규 사용자
↓-0.8%
3.24%
전환율
↑+2.1%
₩58,400
평균 주문
Chart
Bar Chart
월
화
수
목
금
토
일
Line Chart
Donut Chart
100
DataTable
| 이름↕ | 역할↕ | 상태↕ | 가입일↕ |
|---|---|---|---|
| 김오늘 | 관리자 | 활성 | 2024-01-15 |
| 이하나 | 멤버 | 활성 | 2024-02-20 |
| 박민수 | 멤버 | 비활성 | 2024-03-10 |
이름김오늘
역할관리자
상태활성
가입일2024-01-15
이름이하나
역할멤버
상태활성
가입일2024-02-20
이름박민수
역할멤버
상태비활성
가입일2024-03-10
Tag
Colors
BlueGreyRedGreenYellowPurple
Closable
ReactTypeScriptTailwindNext.js
Sizes
SmallMedium
Dropdown
Pagination
...
Breadcrumb
EmptyState
데이터가 없습니다
아직 등록된 항목이 없습니다. 새로운 항목을 추가해보세요.
Button
Sizes
Fill Variants
Weak Variants
States
Inputs
TextField
올바른 형식이 아닙니다
TextArea
최대 500자
SearchField
PhotoPicker (max 3, no compress)
업로드 후 썸네일이 보이고 ✕ 로 삭제. consumer 가 `compress?` 콜백 주입해서 압축/리사이즈 가능.
PhotoLightbox (sample remote photos)
Tab
Large
Small
With Red Bean
With Count (status filter)
Badge
Fill
BlueTealGreenRedYellowPurple
Weak
BlueTealGreenRedYellowPurple
Sizes
XSSMMDLG
SegmentedControl
Selection Controls
Switch
Checkbox
Slider
40
작게크게
Progress
ProgressBar
StepDots (onboarding indicator)
Chip (selected toggle)
Selected vs default
ListRow
김
김오늘
오늘뱅크 1234
50,000원
📱
휴대폰 요금
SKT · 매월 25일
자동
공지사항
Feedback
Loader
Skeleton
Interactive
Headers
BackHeader (onBack callback)
송금하기
BackHeader hideBack + blur
시작하기
onboarding 첫 화면용. `blur` 는 backdrop-blur 헤더.
PageHeader
설정
앱 설정을 변경할 수 있습니다
ChatInput (Korean IME safe)
Demo (모바일 viewport 에서 진짜 동작 확인)
ChatInput 은 화면 하단에 fixed 로 떠요. 아래 미리보기는 inline 시뮬레이션. 실제로는 page 하단에 고정되어 safe-area 적용.
↓ 입력창은 페이지 하단 고정
현재 입력값: (empty)