shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI does not store the name.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()}>Edit Profile</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>Edit Profile</SheetTitle><SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription></SheetHeader><FieldGroup class="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 class="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.
API Reference
Sheet
No extra props in this demo. The rest is on the Sheet page.
Button
Sets props. 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.
