# Notifications page

Every alert the account has sent, under date rules and a tab for what is unread, with a panel of switches that turn each kind down.

Block · With a Pass · https://tactileui.dev/blocks/notifications-page

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Use it

With a Pass, install it with npx shadcn add @tactile/notifications-page (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/notifications-page/.

Load the stylesheet as well as the module, or it renders unstyled: tactile/notifications-page/notifications-page.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then mount(element, options) from tactile/notifications-page/notifications-page.mjs. Every option has a default; tactile/notifications-page-example.html shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## Anatomy

Alerts by day, Tabbed list with counts, Mark all as read, Unread lamp fade, Row settle, Settings rows with switches, Sync legend, List order segmented, Paginated list, Loading skeleton rows, Empty unread tab, Error retry, Toast confirmation, Phone single column, Finish following, Quiet volume

## Usage notes

The notifications screen of an app: the whole alert history read newest first, split by day, with the unread ones lit; and, beside it, the six kinds the account can turn down. Mark all as read is the one act, the tab empties, and the toast says all caught up. The list loads, fails and comes back in place, and the settings apply at once with a legend that says they are kept.

## Options

| Option | Type | Description |
| - | - | - |
| title | text | Page title |
| lead | text | Lead |
| state | enum | The screen at rest, six skeleton rows, the unread tab emptied, the list failed with Retry, or the toast after Mark all as read. |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |

## Methods

- alerts
- switches
- update
- destroy

## States

1. **At rest**: The page head with the title, the lead and the Mark all as read key. The Alerts panel has six alerts in four day groups, each under a ruled date heading; three unread rows carry a lit blue lamp. The settings panel has six rows, five switches on and Product news off, a Saved legend and the note.
2. **Unread**: The Unread tab shows the three unread alerts in two day groups and its count reads 3; Mentions shows the one mention and its count reads 1. The tablist is one tab stop; Left and Right move and select, Home and End go to the ends.
3. **Loading**: Six skeleton rows stand where the list will print; every tab count reads a dash; the panel status says Loading alerts with an amber blinking lamp; Mark all as read is disabled.
4. **Empty**: The Unread tab is chosen and shows the Empty state You are up to date, with the settings panel still visible and every row's lamp out.
5. **Error**: Notifications could not load, in the kit's Error state tray with its printed outline, a red lamp and the words The list did not reach us. Nothing was changed. Retry is the one key: it holds, its lamp turns amber, and the six alerts come back after a moment.
6. **Success**: Mark all as read empties the Unread tab, puts every unread lamp out, sets the Unread count to 0, moves the focus to the chosen tab and shows the Toast All caught up.
7. **A switch turned**: Pressing a settings row's words or its switch turns the switch at once.
8. **Order**: The Segmented control switches the list from Newest to Oldest; the day groups and the rows inside them reverse, and the chosen segment is pressed in.
9. **Phone**: The Mark all as read key fills the width.
10. **Keyboard**: The tablist is one stop with arrows, Home and End. Every row is one stop and Enter opens the invoice or client it names. Space turns a switch, and the whole settings row is its label. After Mark all as read the focus moves to the chosen tab, since the key is disabled.
11. **Reduced motion**: The unread lamp goes out and a row appears with no fade and no settle; nothing blinks, and the Sync status stays lit amber while it saves.
12. **Finishes and volume**: Every surface and lamp reads the kit's tokens, so all fourteen finishes follow. The screen is set in the Quiet volume; its parts keep their sizes and draw hairlines and a whisper of depth.

## How it works

Original composition. Ledgerly, its alerts, clients, invoice numbers, times and switches are sample copy for an invented invoicing app, and the preview says so. The screen is made only of the Tactile UI Kit's parts, with the kit's tokens for every surface and lamp; the block writes no colour and changes no part's finish. It needs the kit's kit.css and kit.mjs beside it. The tabs are wired in the block because the kit wires a tablist once, when it loads, and this screen draws its own markup.