Patterns
Settings Switch Rows
Labelled settings rows with descriptions, icons and a full-row switch target.
Import
Installation
With the Siteplane registry alias configured, add the component and import the installed source from your app.
CLI
pnpm dlx shadcn@4.16.1 add @siteplane/settings-switch-rowsImport
import { SettingsSwitchRows } from "@/components/patterns/settings-switch-rows";Need the machine-readable source metadata? View registry JSON.
Usage
Settings Switch Rows has source and usage docs, but no curated public example set yet.
import { SettingsSwitchRows } from "@/components/patterns/settings-switch-rows";Purpose
Settings Switch Rows is a registry:component for labelled settings with short descriptions, icons and a full-row switch target.
API Reference
- Render
SettingsSwitchRowsfor the included workspace-update and automatic-dark-mode examples. - Adapt the labels, descriptions, icons and default values after installation.
- Keep each row as a label around one Switch so the complete row remains the interaction target.
Motion
- The recipe adds no motion and retains the native Switch track and thumb transition.
- Reduced motion behavior is inherited from Switch and the global motion provider.
Accessibility
- Each Switch receives its accessible name from the visible row label.
- Keep descriptions concise and do not communicate the checked state through color alone.
Implementation Guidance
- Install with
pnpm dlx shadcn@4.16.1 add @siteplane/settings-switch-rows. - Use this recipe for compact boolean preferences with immediate effect.
- Use Form and Field when a preference is submitted as part of a larger form.
Registry
Source Contract
Registry item: settings-switch-rows
Files
src/components/patterns/settings-switch-rows.tsxto components/patterns/settings-switch-rows.tsx
Registry dependencies: @siteplane/base, @siteplane/switch
Package dependencies: lucide-react@1.18.0