Atoms / Switch

Switch

<Switch />Stable

Binary on/off control. Use for settings that take effect immediately — not for forms that submit. Built on Radix Switch.

import { Switch } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Checked

Size

State

Label

<Switch defaultChecked />

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Switch } from "@/components/upnext";


<Switch />

States

<Switch />

Composition

<div className="flex items-center gap-2">
  <Switch id="notif" defaultChecked />
  <Label htmlFor="notif">Notifications</Label>
</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.