Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

User Profile Edit Sheet for React

An Edit Profile button opens a right-side sheet with Username and Full Name already filled in, and Save Changes below.

The title is Edit Profile. Username starts at @johndoe and Full Name starts at John Doe. Save Changes sits in the footer.

Use it for a short profile edit that should not leave the page. A longer profile form belongs on its own page, or in a Dialog if it must be centered. In React, Base UI does not store the name.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button />}>Edit Profile</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you&apos;re done.
      </SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field>
        <FieldLabel htmlFor="profile-username">Username</FieldLabel>
        <Input defaultValue="@johndoe" id="profile-username" type="text" />
      </Field>
      <Field>
        <FieldLabel htmlFor="profile-full-name">Full Name</FieldLabel>
        <Input defaultValue="John Doe" id="profile-full-name" type="text" />
      </Field>
    </FieldGroup>
    <SheetFooter>
      <Button className="w-full">Save Changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

FAQ

Where do the current values come from?

Each input sets defaultValue: @johndoe for Username and John Doe for Full Name. Pass your user's values the same way, or control the inputs if you validate as people type.

Does Save Changes close the sheet?

No, it's a plain Button. Save, then close the sheet by controlling its open state: Pass open to Sheet; onOpenChange receives the next boolean.

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.

How does Edit Profile open the sheet?

The button labeled Edit Profile 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.

What does the sheet announce?

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 Edit Profile, and the description tells people to save when they're done.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

No extra props in this demo. The rest is on the Button page.

Field

Sets htmlFor="profile-username" and htmlFor="profile-full-name". The rest is on the Field page.

Input

Sets defaultValue="@johndoe", id="profile-username", type="text", defaultValue="John Doe" and id="profile-full-name". The rest is on the Input page.

All 29 sheet examples