Security Settings
Settings
Source and install need .
pnpm dlx shadcn@latest add @assembli/profile-settingsProfile Settings
A profile settings page built from Assembli fields: photo with a cropper, name and pronouns, a username checked for availability as you type, a title, a bio with a soft limit, email with its verification state and a time zone. A live card shows how you'll appear, a save bar rises when anything changes, and a new email waits for its confirmation link.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
defaultValue*
ProfileValue
onSave
(value: ProfileValue) => Promise<unknown> | void
Persist the profile. Reject to keep the changes and show an error in the bar.
checkUsername
(name: string, signal: AbortSignal) => Promise<AvailabilityResult>
Look a username up while it's typed. Without it every name counts as free.
emailVerified
boolean
Default
trueWhether the saved email has been confirmed.
onResendVerification
() => Promise<unknown> | void
Send the confirmation link again. A cooldown follows.
profileUrl
string
Default
"@"Muted text before the username, e.g. "northwind.app/".
bioLimit
number
Default
160Bio limit, in characters.
barStrategy
"fixed" | "absolute"
Default
"fixed"fixedfloats the save bar over the viewport;absolutepins it to the nearest positioned ancestor.preview
boolean
Default
trueShow the live profile card beside the form on wide screens.
title
React.ReactNode
Default
"Profile"description
React.ReactNode
Default
"How you appear to people in your workspace, and how we rea…
| Description | |||
|---|---|---|---|
| defaultValue* | ProfileValue | – | |
| onSave | (value: ProfileValue) => Promise<unknown> | void | – | Persist the profile. Reject to keep the changes and show an error in the bar. |
| checkUsername | (name: string, signal: AbortSignal) => Promise<AvailabilityResult> | – | Look a username up while it's typed. Without it every name counts as free. |
| emailVerified | boolean | true | Whether the saved email has been confirmed. |
| onResendVerification | () => Promise<unknown> | void | – | Send the confirmation link again. A cooldown follows. |
| profileUrl | string | "@" | Muted text before the username, e.g. "northwind.app/". |
| bioLimit | number | 160 | Bio limit, in characters. |
| barStrategy | "fixed" | "absolute" | "fixed" |
|
| preview | boolean | true | Show the live profile card beside the form on wide screens. |
| title | React.ReactNode | "Profile" | |
| description | React.ReactNode | "How you appear to people in your workspace, and how we rea… |
Related
Block
Locale Settings
Settings