ODBD Design System alpha

Examples

Examples

Ark UI의 조합 패턴을 ODBD Svelte wrapper만으로 다시 구성한 예시 모음입니다.

Command Menu

Dialog와 입력 필드를 조합해 빠른 이동과 작업 실행을 위한 미니 command menu를 구성합니다.

DialogInputButton

Nested Menu

자식 Menu.Root와 TriggerItem으로 서브메뉴를 여는 실제 중첩 메뉴를 구성합니다.

Menu
진행 중인 주문과 지연 위험을 함께 확인해요.

Select Tabs

Select에서 선택한 범주에 따라 Tabs 콘텐츠 세트를 바꿔 좁은 화면에서도 탐색 흐름을 유지합니다.

SelectTabs
수신 항목
필요한 알림만 선택해 메일 빈도를 조정하세요.

Checkbox Group

여러 Checkbox를 fieldset 구조로 묶어 관련 옵션을 한 번에 스캔하고 선택하도록 구성합니다.

CheckboxFieldset

Tooltip with Following Cursor

Tooltip의 positioning passthrough를 사용해 pointer 좌표를 virtual anchor처럼 따라가도록 배치합니다.

TooltipButton
강민수
오하린

Combobox with Tags Input

Combobox 선택값을 TagsInput 칩으로 렌더링해 여러 담당자를 검색, 선택, 제거합니다.

ComboboxTagsInput
강민수 프론트엔드
김서연 프로덕트
박지훈 데이터
오하린 디자인
이준호 운영

Combobox in Textarea

Textarea에서 @ 토큰을 입력하면 Combobox 후보를 띄워 멘션을 삽입합니다.

ComboboxTextarea
담당 팀 목록을 불러오고 있어요 팀 목록을 불러오고 있어요

Async Select

Select 항목을 비동기 mock으로 불러오며 로딩 상태와 재시도 흐름을 함께 보여줍니다.

SelectButtonSpinner

Menu with Combobox

Menu Content 안에 필터 입력을 배치해 긴 작업 목록을 즉시 좁힙니다.

MenuField

Menu with Links

Menu.Item의 asChild snippet으로 navigation link를 메뉴 항목처럼 렌더링합니다.

Menu

Virtualized Select

Select collection은 1,000개 항목을 유지하고 스크롤 위치에 맞는 행만 렌더링합니다.

Select

문장 선택

정기 점검 공지는 고객이 바로 이해할 수 있도록 영향 시간, 대체 경로, 담당 팀을 같은 문단에서 설명해요. 필요한 문구만 선택하면 문맥을 유지한 채 후속 작업을 붙일 수 있어요.

Popover Selection

문장 안에서 선택한 텍스트 근처에 Popover를 띄워 문맥 작업을 이어갑니다.

Popover

Popover with Tooltip

Popover trigger에 Tooltip을 함께 연결해 열기 전 짧은 설명과 열린 뒤 상세 작업을 나눕니다.

PopoverTooltip

Dialog with Tooltip

Dialog 내부 도움말 Tooltip이 dialog layer 위에서 읽히도록 floating surface를 조합합니다.

DialogTooltip
2026. 06. 12.

Standalone Date Picker

DatePicker를 inline 모드로 열어 입력 없이 독립 달력 선택 흐름을 구성합니다.

DatePicker
요약지표활동
요약 섹션

핵심 상태와 다음 작업을 한 화면에서 확인해요.

Tabs with Links

Tabs trigger를 링크로 위임해 URL hash와 선택 상태를 단순 동기화합니다.

TabsLink