Components
Loading preview...
Accessible dialog overlay for focused user interactions, with sizes, placement, dismiss control, and controlled state.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-modal"use client"
import { Rocket } from "lucide-react"
import { Button, Modal } from "@/components/ui/heroui-modal"
export default function Demo() {
const placements = ["auto", "top", "center", "bottom"] as const
return (
<div className="flex flex-wrap gap-4">
{placements.map((placement) => (
<Modal key={placement}>
<Button variant="secondary">
{placement.charAt(0).toUpperCase() + placement.slice(1)}
</Button>
<Modal.Backdrop>
<Modal.Container placement={placement}>
<Modal.Dialog className="sm:max-w-[360px]">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Icon className="bg-default text-foreground">
<Rocket className="size-5" />
</Modal.Icon>
<Modal.Heading>
Placement: {placement.charAt(0).toUpperCase() + placement.slice(1)}
</Modal.Heading>
</Modal.Header>
<Modal.Body>
<p>
This modal uses the <code>{placement}</code> placement option. Try different
placements to see how the modal positions itself on the screen.
</p>
</Modal.Body>
<Modal.Footer>
<Button className="w-full" slot="close">
Continue
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
))}
</div>
)
}