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 Vue, Ark UI does not submit the contact.
Installation
Anatomy
Usage
<Drawer>
<DrawerTrigger :asChild="true">
<Button variant="outline">Add Contact</Button>
</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 :asChild="true">
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
<!-- The rest of the file is under Installation. -->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 listen to @open-change, which receives details.open.
How does Cancel close the drawer?
It's a DrawerClose, so pressing it dismisses the drawer and drops what was typed.
DrawerClose takes asChild and merges onto the Button inside it.
API Reference
Drawer
Sets asChild. The rest is on the Drawer page.
Button
Sets 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.
