Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Edit Profile Dialog for React

A profile editing dialog with a cover image, an avatar, name and website fields, and a bio that counts the characters left.

Framework
UI library

Editing a profile shouldn't mean digging through settings. This React dialog shows the cover image and avatar with buttons to change them, then the name, username, website and a bio with a live character count. It's shadcn.io's Dialog on Base UI with Avatar, Input Group, Textarea and Field parts.

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

FAQ

How do the image buttons upload?

They're icon buttons with an aria-label and no handler. Have each open a hidden file input with accept="image/*", preview the file, and upload it when people save.

Does the check mean the username is available?

It's a static text-success check in an InputGroupAddon. Check availability as people type, with a short debounce, and swap the icon for a spinner or an error while it runs.

How does the character counter work?

The textarea is controlled with maxLength of 200, and a FieldDescription under it shows 200 minus the current length.

How is the https:// prefix built?

An InputGroup with the InputGroupInput and an InputGroupAddon holding InputGroupText. The addon comes after the input in the markup, so clicking it focuses the input, and align="inline-start" shows it first.

How do I warn about unsaved changes?

Compare the values with what you loaded and, when someone closes with changes, ask before discarding. Control the dialog to intercept the close. Pass open and update it in onOpenChange, which receives the new boolean.

How is the cover styled?

A soft gradient of the theme's primary color, bg-linear-to-r from-primary/30 via-primary/15 to-muted, so it works in light and dark mode. Replace it with the person's image.

All 17 dialog examples