Shadcn Switch Card With Icons

Switch list in card with icons. 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-7 and edit as your own code.

Switch list in card with icons

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: Rows that lead with a dimmed bell, mail or phone icon before each channel name, in a divided card

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

Plain text rows with no leading icon: use the Switch Card Separators 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 Switch here is uncontrolled, seeded by defaultChecked or left off, and nothing reads a flip back; control it to save the setting
No example gives Switch a name, so a native form submit carries none of these values; add one when the switch sits inside a form

Markdownhttps://reui.io/components/switch/c-switch-7.md

MCPget_example("c-switch-7")

Installnpx shadcn@latest add @reui/c-switch-7

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Switch Card With Icons

About Shadcn Switch Card With Icons

What You Can Build With Shadcn Switch Card With Icons

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-7
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 Separators Switch list in card with separators
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

Table
Open-source shadcn table components for admin tables, data display, and responsive lists.
Tabs
Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.
Textarea
Open-source shadcn textarea components for comments, long-form input, and support tickets.
Time Picker
Open-source shadcn time picker components for booking forms, opening hours, and shift scheduling.
Timeline
Open-source shadcn timeline components for activity feeds, roadmaps, and event history.
Toggle
Open-source shadcn toggle components for formatting controls, compact actions, and binary UI states.

Frequently Asked Questions

When should I use Shadcn Switch Card With Icons?

Use it for rows that lead with a dimmed bell, mail or phone icon before each channel name, in a divided card.

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 plain text rows with no leading icon, use the Switch Card Separators 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 With Icons?

Run npx shadcn@latest add @reui/c-switch-7. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Switch Card With Icons free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Switch Card With Icons use?

It composes Card, Field, Separator, Switch. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.