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 { Mail } from "lucide-react"
import { Button, Input, Label, Modal, Surface, TextField } from "@/components/ui/heroui-modal"
export default function Demo() {
return (
<Modal>
<Button variant="secondary">Open Contact Form</Button>
<Modal.Backdrop>
<Modal.Container placement="auto">
<Modal.Dialog className="sm:max-w-md">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Icon className="bg-accent-soft text-accent-soft-foreground">
<Mail className="size-5" />
</Modal.Icon>
<Modal.Heading>Contact Us</Modal.Heading>
<p className="mt-1.5 text-sm leading-5 text-muted">
Fill out the form below and we'll get back to you. The modal adapts automatically
when the keyboard appears on mobile.
</p>
</Modal.Header>
<Modal.Body className="p-6">
<Surface variant="default">
<form className="flex flex-col gap-4">
<TextField className="w-full" name="name" type="text" variant="secondary">
<Label>Name</Label>
<Input placeholder="Enter your name" />
</TextField>
<TextField className="w-full" name="email" type="email" variant="secondary">
<Label>Email</Label>
<Input placeholder="Enter your email" />
</TextField>
<TextField className="w-full" name="phone" type="tel" variant="secondary">
<Label>Phone</Label>
<Input placeholder="Enter your phone number" />
</TextField>
<TextField className="w-full" name="company" variant="secondary">
<Label>Company</Label>
<Input placeholder="Enter your company name" />
</TextField>
<TextField className="w-full" name="message" variant="secondary">
<Label>Message</Label>
<Input placeholder="Enter your message" />
</TextField>
</form>
</Surface>
</Modal.Body>
<Modal.Footer>
<Button slot="close" variant="secondary">
Cancel
</Button>
<Button slot="close">Send Message</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
)
}