CustomDashboard
BlocksArrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.
Compose accessible modal dialogs with triggers, headings, descriptions, dismissal controls, and header, body, and footer regions.
bun add @reopt-ai/opt-uiimport { DialogRoot, DialogDisclosure, DialogPanel, AlertDialogPanel, DialogHeading, DialogDescription, DialogDismiss, DialogHeader, DialogBody, DialogFooter } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
DialogDisclosure를 사용하면 open/setOpen 상태 관리 없이 다이얼로그를 열고 닫을 수 있습니다.
DialogHeading은 자동으로 aria-labelledby를, DialogDescription은 aria-describedby를 다이얼로그에 연결합니다. 수동 ID 관리가 필요 없습니다.
다이얼로그를 닫는 여러 방법을 확인할 수 있습니다. ESC, 배경 클릭, 또는 Button의 onClick으로 setOpen(false)을 호출합니다.
Header, Body, Footer는 모두 선택적입니다. 필요한 부분만 사용할 수 있습니다.
| 키 | 동작 |
|---|---|
| Esc | 다이얼로그 닫기 |
| Tab | 다이얼로그 내 포커스 이동 (트랩) |
Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.
Expand and collapse content with Root, Trigger, and Content components.
Show floating content anchored to a trigger using the Popover primitive.
Open accessible side or bottom sliding panels with a Dialog-based compound API.
Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.
Create a single-trigger dropdown with a convenient wrapper around Menu Core.
Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.