Component

Dialog

A centered modal for confirmation and compact focused tasks.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Dialog } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/dialog.json

Copied source import

code

import "@/styles/axie.css";import { Dialog } from "@/components/axie/dialog";

Prefer @axie/dialog? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Dialog } from "axie-ui";export function Example() {  return (    <Dialog open={open} title="Archive entry" onOpenChange={setOpen}>      Dialog content    </Dialog>  );}

Accessibility

Use dialogs for focused decisions and keep the title descriptive.
Trap focus while the dialog is open.
Make Escape and a visible cancel/dismiss path available unless the action is destructive and requires a deliberate choice.

API Reference

Prop	Type	Default	Description
open	boolean	-	Controls dialog visibility.
onOpenChange	(open: boolean) => void	-	Called when the dialog should open or close.
title	string	-	Optional heading.
footer	ReactNode	-	Optional action area.