Settings and profile

Installation & usage

npx @youj/cli add app-settings

Also installs alert, alert-dialog, app-page, async-button, avatar, avatar-upload, badge, button, card, checkbox, dialog, dropdown-menu, field, icon-bell, icon-check, icon-credit-card, icon-download, icon-more-horizontal, icon-shield, icon-user, icon-user-plus, icon-users, input, input-group, password-input, presence-list, radio-group, segmented-control, select, skeleton, spotlight, switch, table, tabs, textarea, typography, use-controllable-state, use-mobile, youj-core, youj-ui-core.

The CLI copies the block to blocks/app/settings.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

settings-view.tsx

'use client'

import { Settings, type SettingsProps } from '@/blocks/app/settings'

export function SettingsView({ user, members, roles, plans }: Pick<SettingsProps, 'user' | 'members' | 'roles' | 'plans'>) {
  return (
    <Settings
      user={user}
      members={members}
      roles={roles}
      plans={plans}
      copy={{ title: 'Settings' }}
      onTabChange={(tab) => {
        // your code
      }}
      onRetry={() => {
        // your code
      }}
      onSaveProfile={async (profile) => {
        // await your API here; the block shows progress until it settles
      }}
    />
  )
}

Reference

Props36 props, 12 types

Props

Settings props
Prop	Type	Default
`defaultTab`	`string` The tab open at first, when uncontrolled. default 'profile'	`'profile'`
`tab`	`string` The open tab, to control it. Pair with `onTabChange`.	–
`onTabChange`	`(tab: string) => void` Called with the tab's id when the person switches tabs.	–
`sections`	`Array<SettingsSectionId \| SettingsSection>` The tabs, in order: a built-in id (`'profile' \| 'account' \| 'team' \| 'billing' \| 'notifications'`) or your own `{ id, label, icon, panel }`. default the five built-in tabs	`the five built-in tabs`
`brand`	`{ name: string; logo?: ReactNode }` The workspace, named in the page's description, the team count and the invite, and its `logo` over the standalone title. default Northwind Labs	`Northwind Labs`
`headingLevel`	`1 \| 2 \| 3` The page title's level. default 1	`1`
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) and the frame's gutter, in a readable column centered in the content area, with no logo of its own. default true	`true`
`fill`	`boolean` Embedded, take the frame's whole width instead of stopping at a readable 1024px (at 100% scale). default false	`false`
`user`	`SettingsUser` The signed-in person: profile fields and account email. default Ada Lovelace	`Ada Lovelace`
`members`	`SettingsMember[]` The team, in order. default the demo's four	`the demo's four`
`roles`	`SettingsRole[]` The roles a member can hold; `owner` rows are locked. default Owner, Admin, Member, Viewer	`Owner, Admin, Member, Viewer`
`plans`	`SettingsPlan[]` The plans, cheapest first. default Hobby, Pro, Enterprise	`Hobby, Pro, Enterprise`
`plan`	`string` The current plan's id, to control it.	–
`defaultPlan`	`string` The current plan's id at first, when uncontrolled. default 'pro'	`'pro'`
`paymentMethod`	`SettingsPaymentMethod \| null` The card on file, or `null` for none. default a Visa ending 4242	`a Visa ending 4242`
`invoices`	`SettingsInvoice[]` Past invoices, newest first. default the demo's three	`the demo's three`
`notifications`	`SettingsNotificationGroup[]` Notification switches, by channel. default Email and Push	`Email and Push`
`loading`	`boolean` Shows skeleton rows in the team and invoice tables while data loads. default false	`false`
`copy`	`Partial<SettingsCopy>` Any of the page's strings, to rewrite or translate.	–
`error`	`ReactNode` A load failure, shown above the tabs with a Retry button when `onRetry` is set.	–
`onRetry`	`() => void` Called from the error's Retry button.	–
`classNames`	`Partial<Record<'header' \| 'tabs' \| 'content', string>>` Classes for key parts: the page header, the tab list and each tab's panel.	–
`onSaveProfile`	`(profile: SettingsProfile) => Promise<unknown> \| unknown` Saves the profile form; resolve when saved, throw to show the error. Default: a demo wait.	–
`onSaveAvatar`	`(file: File) => Promise<unknown> \| unknown` Uploads a new photo. Default: a demo wait.	–
`onRemoveAvatar`	`() => Promise<unknown> \| unknown` Removes the photo. Default: a demo wait.	–
`onUpdatePassword`	`(passwords: { current: string; next: string; }) => Promise<unknown> \| unknown` Changes the password once both new fields match. Default: a demo wait.	–
`onDeleteAccount`	`() => Promise<unknown> \| unknown` Deletes the account after the typed confirmation. Default: a demo wait.	–
`onInvite`	`(invite: { email: string; role: string; }) => Promise<unknown> \| unknown` Sends an invite; the row joins the table once it resolves. Default: a demo wait.	–
`onRoleChange`	`(member: SettingsMember, role: string) => Promise<unknown> \| unknown` Called when a member's role changes.	–
`onRemoveMember`	`(member: SettingsMember) => Promise<unknown> \| unknown` Removes a member or revokes an invite; the row leaves once it resolves.	–
`onResendInvite`	`(member: SettingsMember) => Promise<unknown> \| unknown` Sends a pending invite again.	–
`onChangePlan`	`(plan: SettingsPlan) => Promise<unknown> \| unknown` Switches plan; the badge moves once it resolves. Default: a demo wait.	–
`onContactSales`	`(plan: SettingsPlan) => void` Called from a plan marked `contactSales`.	–
`onUpdatePayment`	`() => void` Called from the payment method's Update button.	–
`onDownloadInvoice`	`(invoice: SettingsInvoice) => void` Called from an invoice's download button.	–
`onNotificationChange`	`(notification: SettingsNotification, on: boolean) => void` Called when a notification switch flips.	–

`NotificationOption`

NotificationOption props
Prop	Type	Default
`id`Required	`string`	–
`label`Required	`string`	–
`description`	`string`	–

`NotificationPreferencesValue`

NotificationPreferencesValue props
Prop	Type	Default
`enabled`Required	`boolean` The master switch: false mutes everything below it.	–
`what`Required	`string` The id of the chosen "what" option.	–
`reminders`Required	`string[]` The ids of the ticked reminders.	–
`channels`Required	`string[]` The ids of the ticked channels.	–

`SettingsSection`

SettingsSection props
Prop	Type	Default
`id`Required	`string`	–
`label`Required	`string`	–
`icon`	`ReactNode`	–
`panel`Required	`ReactNode` The tab's content.	–

`SettingsUser`

SettingsUser props
Prop	Type	Default
`name`Required	`string`	–
`username`Required	`string`	–
`bio`Required	`string`	–
`email`Required	`string`	–
`avatarUrl`	`string` Their photo. Default: initials.	–
`verified`	`boolean` Shows the Verified badge beside the email.	–

`SettingsProfile`

SettingsProfile props
Prop	Type	Default
`name`Required	`string`	–
`username`Required	`string`	–
`bio`Required	`string`	–

`SettingsMember`

SettingsMember props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`email`Required	`string`	–
`role`Required	`string` One of the `roles` values.	–
`invited`	`boolean` Invited and not joined yet: shows a badge and offers resend or revoke.	–

`SettingsRole`

SettingsRole props
Prop	Type	Default
`value`Required	`string`	–
`label`Required	`string`	–

`SettingsPlan`

SettingsPlan props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`price`Required	`string` As it reads, e.g. `$20` or `Custom`.	–
`blurb`Required	`string`	–
`features`Required	`string[]`	–
`perMember`	`boolean` Priced per member: adds `copy.perMember` after the price.	–
`contactSales`	`boolean` Sold by a conversation: the button reads `copy.talkToSales` and calls `onContactSales`.	–

`SettingsPaymentMethod`

SettingsPaymentMethod props
Prop	Type	Default
`brand`Required	`string` e.g. `Visa`.	–
`last4`Required	`string`	–
`expires`Required	`string` As it reads, e.g. `08 / 2028`.	–

`SettingsInvoice`

SettingsInvoice props
Prop	Type	Default
`id`Required	`string`	–
`date`Required	`string` As it reads, e.g. `Sep 1, 2026`.	–
`amount`Required	`string` As it reads, e.g. `$240.00`.	–
`status`Required	`SettingsInvoiceStatus` `'paid''open''refunded''failed'`	–

`SettingsNotification`

SettingsNotification props
Prop	Type	Default
`id`Required	`string`	–
`label`Required	`string`	–
`description`Required	`string`	–
`on`Required	`boolean` On when the page opens.	–

`SettingsNotificationGroup`

SettingsNotificationGroup props
Prop	Type	Default
`group`Required	`string` The channel, e.g. `Email`.	–
`items`Required	`SettingsNotification[]`	–

Strings92 keys for copy

Built from26 components

Accessibilityheadings, tabs, forms, status

#Installation & usage

#Description

#Code

#Reference

Props

NotificationOption

NotificationPreferencesValue

SettingsSection

SettingsUser

SettingsProfile

SettingsMember

SettingsRole

SettingsPlan

SettingsPaymentMethod

SettingsInvoice

SettingsNotification

SettingsNotificationGroup

Strings

Built from

Components used

#Accessibility