shadcn.io is an independent project built on shadcn/ui
Add New Contact slides up with Name, Email, and Phone fields, then Add Contact and Cancel. Email is an email field and Phone is a telephone field.
Use it for a short create flow on a phone. A longer form belongs on the page, or in a Dialog on a wide screen. In Svelte, Ark UI does not submit the contact.
Installation
Anatomy
Usage
<Drawer><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Add Contact</Button>{/snippet}</DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Add New Contact</DrawerTitle><DrawerDescription>Fill in the details below to add a new contact.</DrawerDescription></DrawerHeader><FieldGroup class="p-4"><Field><FieldLabel>Name</FieldLabel><Input placeholder="Enter name" type="text" /></Field><Field><FieldLabel>Email</FieldLabel><Input placeholder="Enter email" type="email" /></Field><Field><FieldLabel>Phone</FieldLabel><Input placeholder="Enter phone number" type="tel" /></Field></FieldGroup><DrawerFooter><Button>Add Contact</Button><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Cancel</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>FAQ
Which fields does the form have?
Name, a text input; Email, type="email"; and Phone, type="tel". Each has a placeholder and sits in a Field inside a FieldGroup.
How are the labels tied to the inputs?
Each label and input share a Field, so the label names the input and clicking it focuses the field.
Does Add Contact submit anything?
Not yet: the fields aren't in a form and the button has no handler. Wrap the fields in a form, give the button type="submit", and close the drawer once the contact is saved:
Pass open to Drawer and read details.open in onOpenChange.
How does Cancel close the drawer?
It's a DrawerClose, so pressing it dismisses the drawer and drops what was typed.
asChild on DrawerClose receives props: spread them onto the button.
API Reference
Drawer
No extra props in this demo. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets placeholder="Enter name", type="text", placeholder="Enter email", type="email", placeholder="Enter phone number" and type="tel". The rest is on the Input page.
