Overrides
Alert Dialog
Extended Features
AlertDialogFooterwith.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/alert-dialogUsage
"use client"
import { Button } from "@/components/ui/button"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
export function Example() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Open</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Title</AlertDialogTitle>
<AlertDialogDescription>Description text.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="border-t border-border">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}Examples
Footer with border-t
Add border-t (and a border color such as border-border) on AlertDialogFooter for a full-width muted footer strip.