Bonsai Design System

Switch

On/off toggle switch built on Radix UI Switch

Preview

Usage

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

<div className="flex items-center space-x-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

Supports checked, onCheckedChange, and disabled props. The thumb slides between states with a smooth transition.

Install

npx shadcn add @bonsai/switch

On this page