# Shadcn Card With Icons

> Switch list in card with icons

- Type: example, free and open source (MIT)
- Component: [Switch](https://reui.io/components/switch.md)
- Page: https://reui.io/components/switch/c-switch-7
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/switch.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/switch.md
- MCP: `get_example("c-switch-7")`
- Registry item: https://reui.io/r/styles/base-nova/c-switch-7.json
- Uses: Card, Field, Separator, Switch

## Best for

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

## When not to use

- Plain text rows with no leading icon: use [Card Separators](https://reui.io/components/switch/c-switch-6.md) (`get_example("c-switch-6")`)

## Install

```bash
npx shadcn@latest add @reui/c-switch-7
```

## About Shadcn Switch

### 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

- A complete options page with account, security and notification sections ready to drop in: use the [Settings blocks](https://reui.io/blocks/application/settings.md)
- A row of pressed buttons that picks a view, an alignment or a time range: use [Toggle Group](https://reui.io/components/toggle-group.md) (`get_component("toggle-group")`)
- A consent or terms box that is ticked and sent along with a form: use [Checkbox](https://reui.io/components/checkbox.md) (`get_component("checkbox")`)

### 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

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.