Browse the docs

PreviousCard NextDropdown menu

Components

Dialog

Interrupts the flow for a focused task or a confirmation.

Install

npx shadcn@latest add @stardust/dialog
npx shadcn@latest add @stardust/alert-dialog

Examples

Form dialog

Confirm a destructive action

Use AlertDialog when the action can't be undone.

Examples are React. The Vue components take the same props and variants; only the template syntax differs.

Usage

Do

Keep dialogs short: one task, one primary action.
Name the action in the button: Delete project, not OK.

Don’t

Don't open a dialog from a dialog.
Don't use a dialog for information that could sit on the page.

Accessibility

Focus moves into the dialog and returns to the trigger on close.
Escape closes it; AlertDialog requires an explicit choice.