A light settings page with a section nav and a profile card: avatar color swatches tint the cover, fields validate inline, edited fields get a dot, and a footer tracks unsaved changes with reset, saving and saved states.
Manage how you appear to teammates and on shared notebooks.
npx shadcn@latest add https://hyperblur.dev/r/profile-settings-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-settings-card.tsx.
import { ProfileSettingsCard } from "@/components/hyperblur/profile-settings-card"
<ProfileSettingsCard onSave={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Settings" | Page heading. |
| subtitle | string | Text under the heading. | |
| defaultValues | Partial<{ name; username; email; bio; location; website; color }> | Initial field values merged over the built-in profile. | |
| colors | string[] | 6 colors | Avatar color swatches. |
| bioLimit | number | 160 | Maximum bio length. |
| sections | string[] | ["Profile", "Account", "Notifications", "Billing"] | Items of the settings nav. |
| onSave | (values: ProfileSettingsValues) => void | Promise<void> | Called with all values after validation. Nothing is posted by the component. | |
| accent | string | "#2f7bff" | Focus and edited marker color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |