Switch

Cards 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 { useId } from 'react'

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

const SwitchCardDemo = () => {
  const id = useId()

  return (
    <div className='border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none'>
      <Switch
        id={id}
        className='order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2.5 data-[state=checked]:[&_span]:rtl:-translate-x-2.5'
        aria-describedby={`${id}-description`}
      />
      <div className='flex grow gap-3'>
        <img
          src='https://cdn.21st.dev/assets/mirror/92/927ed35f2ced6df626792e9e7a563970822a9f62b5b2a105bca416556dcecdc2.png'
          alt='Google Icon'
          className='size-5'
        />
        <div className='grid grow gap-2'>
          <Label htmlFor={id}>Google Cloud Backup</Label>
          <p id={`${id}-description`} className='text-muted-foreground text-xs'>
            Backup every picture, video and PDFs.
          </p>
        </div>
      </div>
    </div>
  )
}

export default SwitchCardDemo