Search

Search components and blocks

Sign in

Built from the Dialog and Switch components.

Profile Settings Dialog

Pro

A settings surface with a tabbed sidebar instead of a form wall — an animated pill tracks the active tab, theme cards share a selection ring, the avatar reveals a change overlay on hover, Billing shows plan usage and invoice history as read-only actions, and an unsaved-changes bar slides in only once the draft actually differs from what's saved, with Discard reverting it exactly.

pnpm dlx shadcn@latest add @ditherui/profile-settings-dialog

Props

Sidebar tabslayoutId pill slides between Profile / Notifications / Appearance / Billing"profile"
Profile photohidden file input — hover reveals a Change overlay, shows the picked filenamenone
Theme cardslayoutId selection ring — Light / Dark / System"system"
Billingplan usage bar, payment method, invoice history — read-only, not part of the dirty diff—
Unsaved changes barheight/opacity spring — appears when the draft differs from the last savehidden
Discard / Save changesDiscard reverts to the last saved snapshot; Save confirms "Saved!" via ActionSwapButton—

Suggested components