# SettingsToggleFlow
URL: https://remocn.dev/docs/ui/blocks/settings-toggle-flow

Two-column settings card with a blur-in entrance and a cursor-driven switch, select, slider, and save

- Install: `npx shadcn@latest add @remocn/settings-toggle-flow`
- Vibe: clean
- Natural length: state-driven

A composition scene laid out as a centered two-column settings card: a descriptive text block on the left, the controls stacked on the right — each under its own label, including a "Volume" label for the slider. The card and its controls blur-in in sequence, then a cursor flips the notifications switch, opens the theme select and picks an option, drags the volume slider, and clicks the bottom-right Save button — concluding with a settings-saved confirmation toast. Shows cursor-driven interactions across multiple interactive primitives in sequence.

## Installation

```bash
npx shadcn@latest add @remocn/settings-toggle-flow
```

> **Note**
>
> Installing `settings-toggle-flow` automatically installs the shared `remocn-ui` core and all composed primitives via `registryDependencies`: switch, select, slider, button, blur-in, cursor, and toast. Select also pulls in select-item via its own registryDependencies. You do not need to install them separately.

## Composed primitives

- **Blur-in** — staggered reveal of the card, header, and each control group
- **Switch** — toggle for notification settings
- **Select** — dropdown control for theme selection (includes button + select-item)
- **Slider** — dual-channel drag control (value + thumb state)
- **Button** — bottom-right Save action with hover/press/success states
- **Cursor** — animated pointer with click and press interactions
- **Toast** — settings-saved confirmation message

## Timeline narrative

The card surface fades in place (frames 0–18), then the header and each control group blur-in staggered, all settling by frame 58. The cursor moves to the notifications switch and clicks to toggle it on (frame 68). It arrives at the theme select trigger and clicks to open the panel (99), moves to the last option and clicks to select it (124), closing the dropdown. It then drags the volume slider — holding the pressed state while the value animates from frame 149 to 194. After releasing, the cursor moves to the bottom-right Save button and clicks (224; press → success check). The settings-saved toast then appears at frame 240 and auto-dismisses at frame 300.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Notification settings"` | Section title shown in the left text column. |
| `description` | `string` | `"Manage how you receive alerts, set your theme, and tune the volume."` | Supporting paragraph under the title. |
| `rows` | `{label: string}[]` | `[{label:"Notifications"},{label:"Theme"},{label:"Volume"}]` | Setting row labels: [0] switch, [1] select, [2] slider. |
| `selectItems` | `string[]` | `["System","Light","Dark"]` | Array of theme options for the select dropdown. |
| `saveLabel` | `string` | `"Save settings"` | Label of the bottom-right save button. |
| `toastTitle` | `string` | `"Settings saved"` | Confirmation message shown in the toast. |
| `theme` | `RemocnTheme` | — | Optional theme override (concrete oklch/hex/rgb values). |

## Use when
- Showing a complete settings interaction walkthrough for a product demo — zero assembly required.
- Demonstrating multiple UI primitives orchestrated in sequence: switch, select, slider, then toast.
- You need a production-ready settings scene and the default layout matches your content.

## Don't use when
- You need only one control type — use `switch`, `select`, or `slider` individually instead.
- Your settings layout differs from the default two-column card — compose primitives manually for full control.
- You need custom cursor timing or interaction order — wire `cursor` directly with individual primitives instead.