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

import { Button, ButtonGroup } from 'flowbite-react'

const DefaultGroupCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-2 overflow-auto'>
        <ButtonGroup outline>
          <Button className='border-border dark:border-darkborder hover:border-primary hover:bg-primary dark:hover:bg-primary dark:hover:border-primary  dark:text-gray-400 text-gray-900'>
            Profile
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Settings
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Messages
          </Button>
        </ButtonGroup>
        <ButtonGroup outline>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Profile
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Settings
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Messages
          </Button>
        </ButtonGroup>
        <ButtonGroup outline>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Profile
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Settings
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Messages
          </Button>
        </ButtonGroup>
      </div>
    </>
  )
}

export default DefaultGroupCode

import { Button, ButtonGroup } from 'flowbite-react'

const OutlineButtonGroupCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-2 overflow-auto'>
        <ButtonGroup outline>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Profile
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Settings
          </Button>
          <Button className='border-border dark:border-darkborder hover:bg-primary hover:border-primary dark:hover:bg-primary dark:hover:border-primary dark:text-gray-400 text-gray-900'>
            Messages
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color='primary'>Profile</Button>
          <Button color='primary'>Settings</Button>
          <Button color='primary'>Messages</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color='primary'>Profile</Button>
          <Button color='primary'>Settings</Button>
          <Button color='primary'>Messages</Button>
        </ButtonGroup>
      </div>
    </>
  )
}

export default OutlineButtonGroupCode

import { Button, ButtonGroup } from 'flowbite-react'

const ColorOptionsCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-2 overflow-auto'>
        <ButtonGroup>
          <Button color='primary'>Profile</Button>
          <Button color='primary'>Settings</Button>
          <Button color='primary'>Messages</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color='info'>Profile</Button>
          <Button color='info'>Settings</Button>
          <Button color='info'>Messages</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color='success'>Profile</Button>
          <Button color='success'>Settings</Button>
          <Button color='success'>Messages</Button>
        </ButtonGroup>
      </div>
    </>
  )
}

export default ColorOptionsCode

import { Button, ButtonGroup } from 'flowbite-react'
import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi'

const GroupWithIconCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-2 overflow-auto'>
        <ButtonGroup outline>
          <Button color='info' className='hover:bg-info hover:text-white'>
            <HiUserCircle className='mr-3 h-4 w-4' />
            Profile
          </Button>
          <Button color='info' className='hover:bg-info hover:text-white'>
            <HiAdjustments className='mr-3 h-4 w-4' />
            Settings
          </Button>
          <Button color='info' className='hover:bg-info hover:text-white'>
            <HiCloudDownload className='mr-3 h-4 w-4' />
            Messages
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color='primary'>
            <HiUserCircle className='mr-3 h-4 w-4' />
            Profile
          </Button>
          <Button color='primary'>
            <HiAdjustments className='mr-3 h-4 w-4' />
            Settings
          </Button>
          <Button color='primary'>
            <HiCloudDownload className='mr-3 h-4 w-4' />
            Messages
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color='secondary'>
            <HiUserCircle className='mr-3 h-4 w-4' />
            Profile
          </Button>
          <Button color='secondary'>
            <HiAdjustments className='mr-3 h-4 w-4' />
            Settings
          </Button>
          <Button color='secondary'>
            <HiCloudDownload className='mr-3 h-4 w-4' />
            Messages
          </Button>
        </ButtonGroup>
      </div>
    </>
  )
}

export default GroupWithIconCode