DUI
⌘K

Components / Forms

Switch

Toggles a setting on or off.

Preview

1import { Switch } from "@/components/ui/switch"2
3export function SwitchDemo() {4  return <Switch />5}

checked

The checked style of this component.

1import { Switch } from "@/components/ui/switch"2
3export function SwitchDemo() {4  return <Switch defaultChecked />5}

disabled

The disabled style of this component.

1import { Switch } from "@/components/ui/switch"2
3export function SwitchDemo() {4  return <Switch disabled />5}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/switch

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.