Profile Settings

Edit your profile: crop a generated photo in a small dialog, claim a username with a live availability check and suggestions, see your local time on a tiny clock, and save from a bar that springs up when something changes.

akaprofile·avatar crop·unsaved changes

Install

Run this in any project set up for the shadcn CLI. It copies the Profile Settings source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/profile-settings.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { ProfileSettings } from "@/components/profile-settings";

export default function Page() {
  return <ProfileSettings />;
}

Built with

A free React screen in the Settings collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: badge, button, dialog, input, input-group, select, slider, spinner, textarea
npm: lucide-react, motion

Props

Read from the Profile Settings source. Everything is optional unless it says required.

Prop	Type	Default
className	string	—
profile	ProfileDraft	defaultProfile
domain	string	"ridgeline.app"
takenUsernames	string[]	defaultTaken
bioLimit	number	160
zones	ProfileZone[]	defaultZones
onSave	(profile: ProfileDraft) => void \| Promise<void>	—
onNavigate	(section: string) => void	—

More in Settings

268

Appearance Settings

Theme cards with miniature previews above a compact live app that re-themes with a circular wipe, eases into your accent colour and glides between densities as you change them.

269

Security Settings

Password, two-factor, passkeys and sessions in grouped rows: a tiny ring counts recommended steps, passkeys are added inline while your device confirms, and signed-out sessions slide off the table one after another.

270

Notification Settings

Channels you can open and tune, per-event email, push and chat toggles grouped under section switches, quiet hours on a small 24-hour track, and a digest line whose item count rolls as you change things.

271

Members & Roles

Invite people, manage members and pending invites, and tune a role-by-permission matrix with a locked owner column, live head counts and a duplicate-to-customise role.

Prop

Type

Default

className

string

—

profile

ProfileDraft

defaultProfile

domain

string

"ridgeline.app"

takenUsernames

string[]

defaultTaken

bioLimit

number

160

zones

ProfileZone[]

defaultZones

onSave

(profile: ProfileDraft) => void | Promise<void>

—

onNavigate

(section: string) => void

—