# Notification preferences

> Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar.

Block · Pro · https://lodeui.com/blocks/notification-preferences

## When to use

- Notification settings in any product that emails, pushes or posts to chat.

## When not to use

- One or two toggles: use switches.

## Installation

```bash
npx shadcn@latest add @lode/notification-preferences
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { NotificationPreferences } from "@/components/blocks/notification-preferences";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <NotificationPreferences />
    </main>
  );
}
```

Built from: Checkbox, Select, Switch

## API reference

### NotificationPreferences

A channel-by-event matrix with select-all per channel, a required row, quiet hours, pause all and an unsaved-changes bar. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through checkboxes |
| Space | Toggle |

## Accessibility

- A table with row and column headers; every checkbox is labelled "<event> by <channel>".
- Column checkboxes show a mixed state.

## Motion

- Quiet hours expand by height; the save bar slides up when something changes.

## Responsive behavior

- The matrix scrolls horizontally under 448px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Security emails are locked on by design; keep at least one required channel for them.

## Related

- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Account settings](https://lodeui.com/blocks/settings-account) — Profile with inline edits, security toggles, active sessions and guarded delete.