A profile form with a photo cropped as it's picked, beside a card that shows how the profile looks to others as you type.
$ pnpm dlx shadcn@latest add @dashral/profile-settingsWhen to use
- The profile page of an account: a photo cropped as it's picked, name, username, bio, website and place, beside a card that shows how it looks to others.
- Any product where people have a public page or show up to their team: a community, a marketplace, a SaaS workspace.
When not to use
- The workspace's own logo and colour, not a person's: Workspace branding.
- Only a photo to change, inside a form you already have: Avatar Upload on its own.
Usage
Profile settings with your own data: every prop has the sample as its default, so pass only what you have.
"use client"
import { ProfileSettings, type Profile } from "@/components/dashral/blocks/profile-settings"
export default function Profile() {
return (
<ProfileSettings
defaultValue={{
photo: "https://randomuser.me/api/portraits/men/32.jpg",
name: "Daniel Lee",
username: "daniel",
bio: "Support lead. Ask me about anything that's on fire.",
website: "daniel.dev",
location: "Singapore",
}}
usernamePrefix="yourapp.com/"
onSave={async (profile) => {
// profile.photo is a File when it's new, null when it was removed, the URL when it's unchanged.
console.log("save", profile)
}}
/>
)
}API reference
ProfileSettings
A profile settings page: the photo (picked or dropped, cropped to a square), name, username, bio, website and place, beside a card showing how the profile looks to others as you type. Save sends everything to onSave: the photo is a File when it's new, null when it was removed, and the URL you gave when it's unchanged. A handler that throws keeps the changes and says why.
| Prop | Type | Default |
|---|---|---|
defaultValue | ProfileThe profile as it's saved now. | sample |
onSave | (profile: Profile) => Promise<void> | voidSaves the profile; throw an Error to keep the changes and show its message. | — |
title | string | "Profile" |
description | string | sample |
handlePrefix | stringBefore the username on the card: "@" by default. | "@" |
usernamePrefix | stringInside the username field, before it: the address of the public page. "" for none. | "acme.com/" |
bioLimit | numberLongest bio, in characters. | 160 |
ProfileCard
How the profile looks to others: the photo, name and handle, the bio, the website and the place. ProfileSettings shows it beside the form, changing as you type; use it on its own for a profile page or a hover card.
| Prop | Type | Default |
|---|---|---|
profile | ProfileRequired. | — |
handlePrefix | string | "@" |
className | string | — |
type Profile
A profile: the photo is a URL you have, the File just cropped, or null for none.
| Prop | Type | Default |
|---|---|---|
photo | File | string | null | — |
name | string | — |
username | string | — |
bio | string | — |
website | string | — |
location | string | — |