shadcn.io is an independent project built on shadcn/ui
Contact Us is both the button and the title. The description offers to write back. Name, Email, and Message are empty, and Send Message sits under them.
Use it so people can write in without leaving the page. A Popover is lighter for a one-line note. In Solid, Ark UI does not send the message.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger asChild={props => <Button {...props()}>Contact Us</Button>} />
<SheetContent>
<SheetHeader>
<SheetTitle>Contact Us</SheetTitle>
<SheetDescription>
Send us a message and we&aposFAQ
Which fields does the form have?
Name, Email and Message, each an input with a placeholder. Email uses type="email", so phones show the email keyboard. For long messages, swap the Message input for a Textarea.
Does Send Message submit anything?
Not yet: the fields aren't in a form and the button has no handler. Wrap the FieldGroup in a form with an onSubmit, and give the button type="submit".
How do I close the sheet after sending?
Control the open state and set it to false once the message is sent:
Pass open to Sheet and read details.open in onOpenChange.
How are the labels tied to the inputs?
Each label and input share a Field, so clicking Name focuses the name input and screen readers announce the label with it.
API Reference
Sheet
Sets asChild and props. The rest is on the Sheet page.
Button
Sets props. The rest is on the Button page.
