Components

Dialogs & drawers

Overlays take over the screen: the page stops scrolling, Tab stays inside, Escape or the backdrop closes them, and focus returns to the button that opened them.

Dialog

The dashboard's details sheet: rows rise one after another.

Drawer

For editing and longer tasks. Changes apply only when you press Save.

Costa Family · Active · alerts on

Command palette

⌘K (Ctrl+K) from anywhere jumps to any page, project or client. Try it now — the site's own search is this component.

Nothing opened yet

Props

Prop	Values	Default	What it does
`open`	`bindable boolean`	`false`	Shown or not
`title / description`	`string`	—	Heading and one line under it
`Dialog size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	440 · 560 · 720px wide; bottom sheet on phones
`Dialog dismissable`	`boolean`	`true`	false hides × and ignores the backdrop (for must-answer questions)
`Drawer width`	`px`	`460`	Panel width (never wider than the screen)
`footer`	`snippet({ close })`	—	Action buttons, right-aligned
`data-row`	`attribute`	—	Marks rows that rise in one by one