shadcn.io is an independent project built on shadcn/ui
The sheet is titled Account Settings. Email starts at john@example.com. Current Password and New Password are empty. Save Changes sits at the bottom.
Use it for account edits that should not take over the page. Confirm a password change in an Alert Dialog if it signs other sessions out. In Vue, Ark UI does not send this form.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger :asChild="true">
<Button variant="outline">Account Settings</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Account Settings</SheetTitle>
<SheetDescription>Manage your account information</SheetDescription>
</SheetHeader>
<FieldGroup class="gap-4 p-4">
<Field>
<FieldLabel>Email Address</FieldLabel>
<Input defaultValue="john@example.com" type="email" />
</Field>
<Field>
<FieldLabel>Current Password</FieldLabel>
<Input type="password" />
</Field>
<Field><FieldLabel>New Password</FieldLabel><Input type="password" /></Field>
</FieldGroup>
<SheetFooter><Button class="w-full">Save Changes</Button></SheetFooter>
</SheetContent>
</Sheet>FAQ
Which fields does this account sheet collect?
Email Address, an email input that starts with john@example.com, then Current Password and New Password, two password inputs that start empty. Each sits in a Field with its FieldLabel, inside a FieldGroup.
Does Save Changes close the sheet?
No. Save Changes is a plain full-width Button in SheetFooter, with no form around the fields, so the panel stays open. To close it after saving, control the open state:
Pass open to Sheet and listen to @open-change, which receives details.open.
Why is there a SheetTitle on this settings sheet?
SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Account Settings, with Manage your account information as the SheetDescription.
How is the Account Settings button wired up?
The outline button labeled Account Settings is the trigger, and its text is the accessible name.
SheetTrigger takes asChild and merges onto the one Button inside it.
Which edge does this sheet use?
The right: SheetContent leaves side unset. The footer sits at the bottom of the panel because SheetFooter takes the free space above it with mt-auto.
Can I show the password while it is typed?
Not in this demo: both password inputs use type="password" and there is no reveal toggle. Add one with an Input Group and a button that switches the type to text.
API Reference
Sheet
Sets asChild. The rest is on the Sheet 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 defaultValue="john@example.com", type="email" and type="password". The rest is on the Input page.
