Switch/switch-labeled-

PreviousNext

A switch/switch-labeled- example

Docs
shadcnblocksblock

Preview

Loading preview…
code/example/switch/switch-labeled-4.tsx
"use client";

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

export const title = "Switch with Description";

const Example = () => (
  <div className="flex items-center justify-between gap-4">
    <div className="flex flex-col gap-1">
      <Label htmlFor="notifications">Push Notifications</Label>
      <p className="text-sm text-muted-foreground">
        Receive notifications on your device
      </p>
    </div>
    <Switch id="notifications" />
  </div>
);

export default Example;

Installation

npx shadcn@latest add @shadcnblocks/switch-switch-labeled-4

Usage

import { SwitchSwitchLabeled4 } from "@/components/switch-switch-labeled-4"
<SwitchSwitchLabeled4 />