Dialog
A dialog overlays the page with content that needs a response.
Dialog wraps the Base UI Dialog
primitive, composes Button through Base UI's render prop,
and marks each part with data-slot. It is a client component: it uses a
portal, manages focus, and animates with tw-animate-css.
Installation
npx shadcn@latest add @kosori/dialogExample
dialog-example.tsx
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
const DialogExample = () => (
<Dialog>
<DialogTrigger render={<Button variant='outline' />}>
Open dialog
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>kosori</DialogTitle>
<DialogDescription>
A dialog composed from Registry items.
</DialogDescription>
</DialogHeader>
<DialogFooter showCloseButton>
<Button>Continue</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
export default DialogExample;