# V switch 11

> Plan Feature Toggles

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-switch-11).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-switch-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-switch-11-light-4e0450d32d444367.png
- Registry item: https://ui.cnippet.dev/r/v-switch-11.json
- Categories: switch
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-switch-11.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: `@cnippet/switch`

## Files

### `registry/default/variants/v-switch-11.tsx`

```tsx
"use client";

import { useState } from "react";
import { Badge } from "@/registry/default/ui/badge";
import { Switch } from "@/registry/default/ui/switch";

const features = [
  { id: "analytics", label: "Advanced Analytics", pro: true },
  { id: "api", label: "API Access", pro: true },
  { id: "export", label: "Data Export", pro: true },
  { id: "sso", label: "Single Sign-On", pro: true },
  { id: "audit", label: "Audit Logs", pro: false },
  { id: "support", label: "Priority Support", pro: false },
];

export default function Particle() {
  const [enabled, setEnabled] = useState<Record<string, boolean>>({
    analytics: true,
    api: false,
    audit: false,
    export: true,
    sso: false,
    support: false,
  });

  return (
    <div className="w-full max-w-sm space-y-1 rounded-xl border p-1">
      {features.map(({ id, label, pro }) => (
        <div
          className="flex items-center justify-between rounded-lg px-3 py-2.5 hover:bg-muted/50"
          key={id}
        >
          <div className="flex items-center gap-2">
            <span className="font-medium text-sm">{label}</span>
            {!pro && (
              <Badge className="text-[10px]" variant="secondary">
                Enterprise
              </Badge>
            )}
          </div>
          <Switch
            checked={enabled[id]}
            disabled={!pro}
            onCheckedChange={(v) =>
              setEnabled((prev) => ({ ...prev, [id]: v }))
            }
          />
        </div>
      ))}
    </div>
  );
}
```