---
title: Settings
description: A grouped settings screen composed from touchcn components.
---
import Source from './_generated/settings.mdx';

A grouped-list settings screen: a profile header, an appearance section wired to
the live appearance, notification toggles, about rows and a destructive sign-out row
that confirms through a dialog before firing its event.

<DemoFrame component="blocks-settings" height={700} />

## Installation

```bash
npx touchcn add settings
```

This also adds the components the block composes:

`avatar` · `button` · `dialog` · `list` · `navbar` · `page` · `switch`

## Usage

<CodeGroup>

```html Angular
<tcn-settings-block name="Ada Lovelace" email="ada@example.com" (signOut)="signOut()" />
```

```tsx React
import { TcnSettingsBlock } from '@/components/blocks/settings';

<TcnSettingsBlock name="Ada Lovelace" email="ada@example.com" onSignOut={signOut} />
```

```vue Vue
<script setup lang="ts">
import { TcnSettingsBlock } from '@/components/blocks/settings';
</script>

<template>
  <TcnSettingsBlock name="Ada Lovelace" email="ada@example.com" @sign-out="signOut" />
</template>
```

</CodeGroup>

The appearance rows read and write the active theme and color scheme through
`TouchcnAppearance` (Angular) / `useTouchcnAppearance` (React), so they control the
whole app. The notification toggles hold local state — wire them to your own settings.

Set `showBack` to render a back control in the navbar's leading slot; it emits
`back` (Angular) / `onBack` (React) when tapped — wire it to your router.

<Source />