Switch

Forms 136

About

Toggle switch component built on Radix UI with smooth animation and focus states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Switch to your project and fits it to your theme.

Code

How Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Switch } from "@/components/ui/interfaces-switch"

export default function SwitchDemo() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
      <div className="flex items-center gap-3">
        <Switch id="airplane-mode" defaultChecked />
        <label htmlFor="airplane-mode" className="text-sm font-medium cursor-pointer">
          Airplane Mode
        </label>
      </div>
    </div>
  )
}