ODBD Design System alpha

Examples

Examples

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

Command Menu

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

Nested Menu

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

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

Select Tabs

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

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

Checkbox Group

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

Tooltip with Following Cursor

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

강민수
오하린

Combobox with Tags Input

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

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

Combobox in Textarea

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

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

Async Select

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

Menu with Combobox

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

Menu with Links

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

Virtualized Select

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

문장 선택

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

Popover Selection

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

Popover with Tooltip

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

Dialog with Tooltip

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

2026. 06. 12.

Standalone Date Picker

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

Tabs with Links

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