Overrides
Dialog
Extended Features
- Dialog body — scrollable region between
DialogHeaderandDialogFooter DialogFooterwith.border-thas a light background
Install
Configure your registry in components.json:
{
"registries": {
"@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
}
}Then run:
npx shadcn@latest add @uxio/dialogUsage
"use client"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogBody,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
export function Example() {
return (
<Dialog>
<DialogTrigger render={<Button variant="outline">Open</Button>} />
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
</DialogHeader>
<DialogBody>{/* long content */}</DialogBody>
<DialogFooter>
<Button type="button">Done</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}Examples
Dialog body
Use DialogBody between the header and footer when the main content may grow beyond the viewport.
Footer with border-t
Add border-t (and a border color such as border-border) on DialogFooter for a full-width muted footer strip.