Settings Section

A titled group of Settings Items with a footer note, the building unit of a settings screen.

Settings

Notifications

Push notifications

Quiet hours

22:00 – 07:00

Quiet hours mute every alert.

Account

ada@mail.com

Password

Installation

npx axiom add settings-section

pnpm dlx axiom add settings-section

yarn dlx axiom add settings-section

bun x axiom add settings-section

Also copies: the settings-item composition, separator, text and their dependencies. The file lands in components/blocks/settings-section.tsx.

Usage

import { SettingsSection } from "@/components/blocks/settings-section";
import { SettingsItem } from "@/components/compositions/settings-item";

<SettingsSection title="Notifications" footer="Quiet hours mute every alert.">
	<SettingsItem
		divider
		icon="bell"
		title="Push notifications"
		trailing="switch"
		checked={push}
		onCheckedChange={setPush}
	/>
	<SettingsItem
		icon="calendar"
		title="Quiet hours"
		value="22:00 – 07:00"
		onPress={() => router.push("/settings/quiet-hours")}
	/>
</SettingsSection>;

A settings screen is a Scaffold with a scroll view and one Settings Section per group.

Structure

SettingsSection
├── title        Text, footnote, muted, semibold (a header for screen readers)
├── rows         your SettingsItem children, each with its own divider
└── footer       Text, footnote, muted

The title and footer are aligned to the screen margin (metrics.screenMargin). The rows sit on the screen background, without a card around them.

Props

Prop	Type	Default	Description
`title`	`string`	—	Header above the rows, announced as a header.
`footer`	`string`	—	Note under the rows, to explain a setting.
`children`	`ReactNode`	—	`SettingsItem` rows, rendered as written. Give each row but the last a `divider`.

Built with

Settings Item: the rows. A composition built on Item.
Text: the title and the footer.

Item + Icon + Switch + Text  →  Settings Item  →  Settings Section
         primitives              composition         block

Used in

The planned Profile blocks build their settings and account screens from Settings Sections.