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() {
return (
<Modal>
<Button variant="secondary">Open Modal</Button>
<Modal.Backdrop>
<Modal.Container>
<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>Welcome to HeroUI</Modal.Heading>
</Modal.Header>
<Modal.Body>
<p>
A beautiful, fast, and modern React UI library for building accessible and
customizable web applications with ease.
</p>
</Modal.Body>
<Modal.Footer>
<Button className="w-full" slot="close">
Continue
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
)
}