Build · New

Switch Card

A settings row turned on or off with a switch, with an icon at the start, a headline and supporting text. The whole row is clickable.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/switch-card

import { SwitchCard } from "@/components/ui/switch-card";

<SwitchCard leading={BellIcon} defaultChecked description="Transfers, card payments and logins">
  Push notifications
</SwitchCard>

leading="switch" puts the switch at the start of the row.

Prop	Type	Description
`children`	`ReactNode`	Figma's Headline: the setting's name.
`overline / description / trailingText`	`ReactNode`	Figma's Overline, Supporting text and Trailing text.
`leading`	`IconComponent \| ReactNode \| "switch"`	Figma's Leading type.
`checked / defaultChecked / onCheckedChange`	`…`	As on Switch.
`disabled`	`boolean`	State = Disabled.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Space`	Toggles the switch; Tab moves between rows.

Each switch is role="switch", named by its row's headline and linked to the supporting text.

The icon sits at the start (the right), the switch at the end (the left), as Figma recommends for settings lists.