Skip to content

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

Free

User Profile Edit Sheet for Ark UI

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, Ark 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 asChild>
    <Button>Edit Profile</Button>
  </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>Username</FieldLabel>
        <Input defaultValue="@johndoe" type="text" />
      </Field>
      <Field>
        <FieldLabel>Full Name</FieldLabel>
        <Input defaultValue="John Doe" 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 and read details.open in onOpenChange.

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. SheetTrigger takes asChild and merges onto the one Button inside it.

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

Sets asChild. The rest is on the Sheet page.

Button

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

Field

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

Input

Sets defaultValue="@johndoe", type="text" and defaultValue="John Doe". The rest is on the Input page.

All 29 sheet examples