Primitive API Reference
Complete prop contracts, data attributes, and keyboard interaction tables for CosmoUI core primitives.
Dialog (@cosmoui/primitives/dialog)
A modal or non-modal window overlaid on either the primary window or another dialog window, rendering content underneath inert.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state of the dialog window. |
defaultOpen | boolean | false | Initial open state when rendered as an uncontrolled primitive. |
onOpenChange | (open: boolean) => void | undefined | Event handler invoked when the open state changes. |
modal | boolean | true | When true, interaction with outside elements is disabled and screen readers see only dialog content. |
Popover & Floating Anchor
Displays rich interactive content in a portal, anchored to a trigger button with automatic viewport collision flipping and arrow positioning.
| Data Attribute | Values | Description |
|---|---|---|
[data-state] | "open" | "closed" | Exposed on both Trigger and Content for CSS keyframe transitions. |
[data-side] | "top" | "right" | "bottom" | "left" | Resolved placement after viewport boundary collision detection. |
[data-align] | "start" | "center" | "end" | Resolved alignment along the anchor axis. |
Command Palette & Combobox
Fast, composable, unstyled command menu and autocomplete primitive with asynchronous filtering and group heading virtualization.
<Command.Root label="Global Command Menu" loop>
<Command.Input placeholder="Search components, tokens, or actions..." />
<Command.List>
<Command.Empty>No matching primitives found.</Command.Empty>
<Command.Group heading="Navigation">
<Command.Item value="tokens">Inspect OKLCH Color Scale</Command.Item>
<Command.Item value="a11y">Run ARIA Keyboard Audit</Command.Item>
</Command.Group>
</Command.List>
</Command.Root>Tabs & Roving Focus
Organizes content into multiple panels with automatic or manual keyboard activation following the WAI-ARIA Tabs design pattern.