SettingsToggleFlow

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

import { SettingsToggleFlow } from "@/components/remocn/settings-toggle-flow";export const Scene = () => <SettingsToggleFlow />;

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

$ pnpm dlx shadcn@latest add @remocn/settings-toggle-flow

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).