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 React, Base UI does not send this form.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger render={<Button variant="outline" />}>
Account Settings
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Account Settings</SheetTitle>
<SheetDescription>Manage your account information</SheetDescription>
</SheetHeader>
<FieldGroup className="gap-4 p-4">
<Field>
<FieldLabel htmlFor="account-email">Email Address</FieldLabel>
<Input
defaultValue="john@example.com"
id="account-email"
type="email"
/>
</Field>
<Field>
<FieldLabel htmlFor="account-current-password">
Current Password
</FieldLabel>
<Input id="account-current-password" type="password" />
</Field>
<Field>
<FieldLabel htmlFor="account-new-password">New Password</FieldLabel>
<Input id="account-new-password" type="password" />
</Field>
</FieldGroup>
<SheetFooter>
<Button className="w-full">Save Changes</Button>
{/* The rest of the file is under Installation. */}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; onOpenChange receives the next boolean.
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.
The Button goes in the render prop of SheetTrigger, and the label stays its child.
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
No extra props in this demo. The rest is on the Sheet page.
Button
Sets variant="outline". The rest is on the Button page.
Field
Sets htmlFor="account-email", htmlFor="account-current-password" and htmlFor="account-new-password". The rest is on the Field page.
Input
Sets defaultValue="john@example.com", id="account-email", type="email", id="account-current-password", type="password" and id="account-new-password". The rest is on the Input page.
