Destructive-style dialog variant used for irreversible confirmation actions.

It delegates to dialog/1 and applies destructive emphasis classes.

Example

heex title="Alert dialog" <.alert_dialog id="delete-dialog"> <:trigger><.button variant={:destructive}>Delete project</.button></:trigger> <:title>Delete project?</:title> <:description>This action is irreversible.</:description> All deployments and analytics will be removed. <:footer> <.button variant={:outline} type="button">Cancel</.button> <.button variant={:destructive} type="button">Delete</.button> </:footer> </.alert_dialog>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) (required) open (:boolean) - Defaults to false. class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

trigger (required) title description inner_block (required) * footer

Modal dialog with trigger/content slots.

Set open from LiveView assigns for server-controlled state, or rely on the optional CuiDialog JS hook for client toggling.

Examples

heex title="Basic confirmation dialog" <.dialog id="delete-project-dialog"> <:trigger> <.button variant={:destructive}>Delete project</.button> </:trigger> <:title>Delete project?</:title> <:description>This action cannot be undone.</:description> Are you sure you want to permanently remove this project? <:footer> <.button variant={:outline} type="button">Cancel</.button> <.button variant={:destructive} type="button">Delete</.button> </:footer> </.dialog>

heex title="Form inside dialog" vrt <.dialog id="invite-member-dialog"> <:trigger><.button>Invite member</.button></:trigger> <:title>Invite teammate</:title> <:description>Grant access to this workspace.</:description> <div class="grid gap-4"> <.field> <:label for="invite_email">Email</:label> <.input id="invite_email" type="email" placeholder="dev@company.com" /> </.field> <.field> <:label for="invite_role">Role</:label> <.select id="invite_role" name="invite_role" value="member"> <:option value="member" label="Member" /> <:option value="admin" label="Admin" /> </.select> </.field> </div> <:footer> <.button variant={:outline} type="button">Cancel</.button> <.button type="button">Send invite</.button> </:footer> </.dialog>

heex title="Server-controlled open state" vrt <.dialog id="billing-dialog"> <:trigger><.button>Open billing</.button></:trigger> <:title>Billing details</:title> <:description>Review your subscription and payment method.</:description> <p class="text-sm">Current plan: Pro</p> </.dialog>

heex title="Server-controlled with CinderUI.JS" <.button phx-click={CinderUI.JS.open(to: "#account-dialog")}> Open account dialog </.button> <.dialog id="account-dialog"> <:trigger><span class="hidden" /></:trigger> <:title>Account</:title> <:description>Managed from LiveView state.</:description> <.button phx-click={CinderUI.JS.close(to: "#account-dialog")}>Close</.button> </.dialog>

Screenshot

View live examples and full component docs.

Attributes

• id (:string) (required)
• open (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• content_class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• trigger (required)
• title
• description
• inner_block (required)
• footer

Drawer panel component.

Drawers are edge-anchored panels intended for mobile-style or bottom-sheet flows. Use sheet/1 for side panels.

side controls placement: :top or :bottom.

Example

heex title="Bottom drawer" vrt <.drawer id="mobile-filters"> <:trigger><.button variant={:outline}>Filters</.button></:trigger> <:title>Filter results</:title> <:description>Refine issues by status and owner.</:description> <div class="space-y-2 text-sm"> <p>Status: Open</p> <p>Owner: Platform</p> </div> </.drawer>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) (required) open (:boolean) - Defaults to false. side (:atom) - Defaults to :bottom. Must be one of :top, or :bottom. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

trigger (required) title description inner_block (required) * footer

Dropdown menu structure.

Menu open/close behavior is provided by the optional CuiDropdownMenu hook. Positioning is currently a fixed offset anchored from the trigger container, so menus do not yet flip or shift to stay inside the viewport.

Example

heex title="Dropdown menu" align="full" <.dropdown_menu id="project-actions"> <:trigger><.button variant={:outline}>Actions</.button></:trigger> <:item href="/projects/1">Open project</:item> <:item>Rename</:item> <:item disabled={true}>Archive</:item> </.dropdown_menu>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) (required) class (:string) - Defaults to nil. content_class (:string) - additional classes for the floating menu panel. Defaults to nil. Global attributes are accepted. ## Slots

trigger (required) item (required) - Accepts attributes:

href (:string) - standard anchor destination for external or full-page navigation. navigate (:string) - LiveView navigate target for a client-side redirect. patch (:string) - LiveView patch target for in-place URL/state updates. method (:string) - HTTP method forwarded to Phoenix.Component.link/1 for non-GET actions. replace (:boolean) - replaces the current history entry instead of pushing a new one. csrf_token (:string) - explicit CSRF token for method-based links when needed. * disabled (:boolean) - renders the item in a disabled, non-interactive state.

Hover card with trigger and content slots.

Example

heex title="Hover card" align="full" <.hover_card> <:trigger><span class="text-sm underline">Levi Buzolic</span></:trigger> <:content> <div class="space-y-1 text-sm"> <p class="font-medium">Levi Buzolic</p> <p class="text-muted-foreground">Maintains docs and releases.</p> </div> </:content> </.hover_card>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

trigger (required) content (required)

Menubar scaffold with dropdown-like triggers.

This is a simplified semantic wrapper for desktop command menus.

Example

heex title="Menubar" align="full" <.menubar> <:menu label="File"> <button type="button" class="flex w-full rounded-sm px-2 py-1.5 text-sm hover:bg-accent"> New project </button> </:menu> <:menu label="View"> <button type="button" class="flex w-full rounded-sm px-2 py-1.5 text-sm hover:bg-accent"> Toggle sidebar </button> </:menu> </.menubar>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) - Defaults to nil. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

* menu (required) - Accepts attributes:

* label (:string) (required)

Popover with trigger and content slots.

Uses optional CuiPopover hook for click toggling.

Positioning is currently a fixed offset anchored under the trigger (mt-2 plus the component's absolute positioning classes). Collision-aware flipping and viewport overflow handling are not implemented yet.

Example

heex title="Popover" align="full" <.popover id="share-popover"> <:trigger><.button variant={:outline}>Share</.button></:trigger> <:content> <div class="space-y-2 text-sm"> <p>Invite collaborators to this workspace.</p> <.button size={:sm}>Copy link</.button> </div> </:content> </.popover>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) (required) class (:string) - Defaults to nil. content_class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

trigger (required) content (required)

Sheet panel component for side or edge-mounted overlays.

Use sheet/1 for desktop-style settings panels and side drawers.

Example

heex title="Right sheet" vrt <.sheet id="settings-sheet"> <:trigger><.button variant={:outline}>Open settings</.button></:trigger> <:title>Workspace settings</:title> <:description>Manage defaults for the current workspace.</:description> <div class="space-y-2 text-sm"> <p>Theme: System</p> <p>Notifications: Enabled</p> </div> </.sheet>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) (required) open (:boolean) - Defaults to false. side (:atom) - Defaults to :right. Must be one of :top, :right, :bottom, or :left. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

trigger (required) title description inner_block (required) * footer

Tooltip helper with hover/focus behavior.

Example

heex title="Tooltip" <.tooltip text="Copy API key"> <.button size={:icon} variant={:outline} aria-label="Copy">C</.button> </.tooltip>

## Screenshot

View live examples and full component docs.

## Attributes

text (:string) (required) class (:string) - Defaults to nil. content_class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)