Switch list in card with separators
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A card holding 3 channel rows split by separators, each name at the left and its toggle at the right edge
When to use
- Single on or off preferences beside a label, such as airplane mode, sign in security or an AI feature
- Grouped notification, privacy and editor preferences in a card, a Frame panel or a dense list
- Options with a supporting sentence set as clickable tiles, including a risky one that erases data
When not to use
- Rows that need a small leading icon before each name: use the Switch Card With Icons example
- A panel that needs a title bar above its rows: use the Switch In Frame example
- A complete options page with account, security and notification sections ready to drop in: use the Settings blocks
- A row of pressed buttons that picks a view, an alignment or a time range: use the Toggle Group component
- A consent or terms box that is ticked and sent along with a form: use the Checkbox component
Agent notes
- Every
Switchhere is uncontrolled, seeded bydefaultCheckedor left off, and nothing reads a flip back; control it to save the setting - No example gives
Switcha name, so a native form submit carries none of these values; add one when the switch sits inside a form
https://reui.io/components/switch/c-switch-6.mdget_example("c-switch-6")npx shadcn@latest add @reui/c-switch-6About Shadcn Switch Card Separators
Switch list in card with separators. Built by composing Card, Field, Separator, Switch. A free, open source shadcn switch example you can install with npx shadcn@latest add @reui/c-switch-6 and edit as your own code.
What You Can Build With Shadcn Switch Card Separators
- Composes Card, Field, Separator, Switch, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-switch-6
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Switch Examples
- Basic Basic switch.
- With Description Switch with description.
- Disabled Disabled switch.
- Sizes Switch in different sizes.
- Switch Group Switch group
- Card With Icons Switch list in card with icons
- In Frame Switch in frame
- Tooltip Info Switch with tooltip info
- With Badges Switch with badges
- Colored Colored switches
- Destructive Confirm Destructive switch with confirmation text
- Compact Table Compact settings table with switches
Related Shadcn Component Categories
Open-source shadcn table components for admin tables, data display, and responsive lists.
Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.
Open-source shadcn textarea components for comments, long-form input, and support tickets.
Open-source shadcn time picker components for booking forms, opening hours, and shift scheduling.
Open-source shadcn timeline components for activity feeds, roadmaps, and event history.
Open-source shadcn toggle components for formatting controls, compact actions, and binary UI states.
Frequently Asked Questions
When should I use Shadcn Switch Card Separators?
Use it for a card holding 3 channel rows split by separators, each name at the left and its toggle at the right edge.
Shadcn Switch as a whole fits:
- Single on or off preferences beside a label, such as airplane mode, sign in security or an AI feature
- Grouped notification, privacy and editor preferences in a card, a Frame panel or a dense list
- Options with a supporting sentence set as clickable tiles, including a risky one that erases data
For rows that need a small leading icon before each name, use the Switch Card With Icons example. For a panel that needs a title bar above its rows, use the Switch In Frame example. For a complete options page with account, security and notification sections ready to drop in, use the Settings blocks. For a row of pressed buttons that picks a view, an alignment or a time range, use the Toggle Group component. For a consent or terms box that is ticked and sent along with a form, use the Checkbox component.
How do I install Shadcn Switch Card Separators?
Is Shadcn Switch Card Separators free to use?
Which components does Shadcn Switch Card Separators use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.