Loading…

Settings

Block

A settings page with a profile form, immediate toggles and a danger zone.

SaaS
10 components
1 file

Settings

Manage your profile and how you are notified.

Profile

This is how you appear to your team.

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add settings

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { SettingsBlock } from "@/components/blocks/settings";

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<SettingsBlock>

Prop	Type	Default
`notifications` (required)	`SettingsNotification[]`	—
`profile` (required)	`SettingsProfile`	—
`extraTabs` Extra tabs, if the product needs them.	`{ value: string; label: string; content: ReactNode }[]`	`[]`
`onDeleteAccount`	`() => void`	—
`onSaveProfile` Staged: the profile form has a Save button.	`(profile: SettingsProfile) => void`	—
`onToggleNotification` Immediate: a switch applies as soon as it is flipped.	`(id: string, enabled: boolean) => void`	—
`pending`	`boolean`	`false`
`className`	`string`	—

Accessibility

Switches apply immediately and have no Save button — a switch that needs saving is a broken promise, so staged changes live in the form instead. The delete confirmation names what will be destroyed and requires typing the account's email, so the destructive button cannot be reached by muscle memory.