Switch

Forms 2

About

Here is Switch component

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

import { Switch } from '@/components/ui/switch'

const SwitchSizesDemo = () => {
  return (
    <div className='flex items-center gap-3'>
      <Switch aria-label='Small switch' />
      <Switch
        aria-label='Medium switch'
        className='h-6 w-10 [&_span]:size-5 data-[state=checked]:[&_span]:translate-x-4.5 data-[state=checked]:[&_span]:rtl:-translate-x-4.5'
      />
      <Switch
        aria-label='Large switch'
        className='h-7 w-12 [&_span]:size-6 data-[state=checked]:[&_span]:translate-x-5.5 data-[state=checked]:[&_span]:rtl:-translate-x-5.5'
      />
    </div>
  )
}

export default SwitchSizesDemo