Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

'use client'

import { ToggleSwitch } from 'flowbite-react'
import { useState } from 'react'

const DefaultSwitchCode = () => {
  const [switch1, setSwitch1] = useState(true)
  const [switch2, setSwitch2] = useState(false)
  const [switch3, setSwitch3] = useState(true)

  return (
    <>
      <div className='flex gap-4 flex-wrap'>
        <ToggleSwitch checked={switch1} onChange={setSwitch1} />
        <ToggleSwitch checked={switch2} onChange={setSwitch2} />
        <ToggleSwitch checked={false} disabled onChange={() => undefined} />
        <ToggleSwitch checked={true} disabled onChange={() => undefined} />
        <ToggleSwitch checked={switch3} onChange={setSwitch3} />
      </div>
    </>
  )
}

export default DefaultSwitchCode

'use client'

import { ToggleSwitch } from 'flowbite-react'
import { useState } from 'react'

const ColorSwitchCode = () => {
  const [switch1, setSwitch1] = useState(true)
  const [switch2, setSwitch2] = useState(true)
  const [switch3, setSwitch3] = useState(true)
  const [switch4, setSwitch4] = useState(true)
  const [switch5, setSwitch5] = useState(true)

  return (
    <>
      <div className='flex gap-4 flex-wrap'>
        <ToggleSwitch checked={switch1} onChange={setSwitch1} />
        <ToggleSwitch checked={switch2} onChange={setSwitch2} color='blue' />
        <ToggleSwitch checked={switch3} onChange={setSwitch3} color='success' />
        <ToggleSwitch checked={switch4} onChange={setSwitch4} color='red' />
        <ToggleSwitch checked={switch5} onChange={setSwitch5} color='yellow' />
      </div>
    </>
  )
}

export default ColorSwitchCode

'use client'
import { ToggleSwitch } from 'flowbite-react'
import { useState } from 'react'

const SizeSwitchCode = () => {
  const [switch1, setSwitch1] = useState(true)
  const [switch2, setSwitch2] = useState(true)
  const [switch3, setSwitch3] = useState(true)

  return (
    <>
      <div className='flex gap-4 flex-wrap'>
        <ToggleSwitch checked={switch1} onChange={setSwitch1} sizing='sm' />
        <ToggleSwitch checked={switch2} onChange={setSwitch2} sizing='md' />
        <ToggleSwitch checked={switch3} onChange={setSwitch3} sizing='lg' />
      </div>
    </>
  )
}

export default SizeSwitchCode