# Switch Cards 3 - Settings list

> Settings List.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/switch-switch-cards-3).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/switch-switch-cards-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/switch-switch-cards-3-light-7cfc27f4205a34d0.png
- Registry item: https://shadcnblocks.com/r/switch-switch-cards-3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/switch-switch-cards-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `label`, `switch`

## Files

### `example/switch/switch-cards-3.tsx`

```tsx
"use client";

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export const title = "Settings List";

const Example = () => (
  <div className="flex flex-col divide-y rounded-lg border bg-background">
    <div className="flex items-center justify-between gap-4 p-4">
      <div className="flex flex-col gap-1">
        <Label className="font-medium" htmlFor="marketing">
          Marketing emails
        </Label>
        <p className="text-sm text-muted-foreground">
          Receive emails about new products
        </p>
      </div>
      <Switch id="marketing" />
    </div>
    <div className="flex items-center justify-between gap-4 p-4">
      <div className="flex flex-col gap-1">
        <Label className="font-medium" htmlFor="security">
          Security emails
        </Label>
        <p className="text-sm text-muted-foreground">
          Receive emails about account security
        </p>
      </div>
      <Switch defaultChecked id="security" />
    </div>
  </div>
);

export default Example;
```