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

import { Button } from 'flowbite-react'

const DefaultButtonCode = () => {
  return (
    <>
      <div>
        <div className='flex gap-4 flex-wrap mt-2'>
          <Button color='primary'>Primary</Button>
          <Button color='secondary'>Secondary</Button>
          <Button color='success'>Success</Button>
          <Button color='info'>Info</Button>
          <Button color='warning'>Warning</Button>
          <Button color='error'>Danger</Button>
          <Button color='light'>Light</Button>
          <Button color='dark'>Dark</Button>
        </div>
      </div>
    </>
  )
}

export default DefaultButtonCode

import { Button } from 'flowbite-react'

const LightButtonCode = () => {
  return (
    <>
      <div className='flex gap-4 flex-wrap mt-2'>
        <Button color='lightprimary'>Primary</Button>
        <Button color='lightsecondary'>Secondary</Button>
        <Button color='lightsuccess'>Success</Button>
        <Button color='lightinfo'>Info</Button>
        <Button color='lightwarning'>Warning</Button>
        <Button color='lighterror'>Danger</Button>
      </div>
    </>
  )
}

export default LightButtonCode

import { Button } from 'flowbite-react'

const OutlinePillButtonCode = () => {
  return (
    <>
      <div className='flex gap-4 flex-wrap mt-2'>
        <Button
          color='primary'
          className='border border-primary text-primary hover:bg-primary hover:text-white'
          pill
          outline>
          Primary
        </Button>
        <Button
          color='secondary'
          className='border border-secondary text-secondary hover:bg-secondary hover:text-white'
          pill
          outline>
          Secondary
        </Button>
        <Button
          color='success'
          className='border border-success text-success hover:bg-success hover:text-white'
          pill
          outline>
          Success
        </Button>
        <Button
          color='info'
          className='border border-info text-info hover:bg-info hover:text-white'
          pill
          outline>
          Info
        </Button>
        <Button
          color='warning'
          className='border border-warning text-warning hover:bg-warning hover:text-white'
          pill
          outline>
          Warning
        </Button>
        <Button
          color='error'
          className='border border-error text-error hover:bg-error hover:text-white'
          pill
          outline>
          Danger
        </Button>
        <Button color='light' className='' pill outline>
          Light
        </Button>
        <Button
          color='dark'
          className='border border-dark text-dark hover:bg-dark hover:text-white dark:text-white'
          pill
          outline>
          Dark
        </Button>
      </div>
    </>
  )
}

export default OutlinePillButtonCode

import { Button } from 'flowbite-react'

const OutlineSqrButtonCode = () => {
  return (
    <>
      <div className='flex gap-4 flex-wrap mt-2'>
        <Button
          color='primary'
          className='border border-primary text-primary hover:bg-primary hover:text-white rounded-md'
          outline>
          Primary
        </Button>
        <Button
          color='secondary'
          className='border border-secondary text-secondary hover:bg-secondary hover:text-white rounded-md'
          outline>
          Secondary
        </Button>
        <Button
          color='success'
          className='border border-success text-success hover:bg-success hover:text-white rounded-md'
          outline>
          Success
        </Button>
        <Button
          color='info'
          className='border border-info text-info hover:bg-info hover:text-white rounded-md'
          outline>
          Info
        </Button>
        <Button
          color='warning'
          className='border border-warning text-warning hover:bg-warning hover:text-white rounded-md'
          outline>
          Warning
        </Button>
        <Button
          color='error'
          className='border border-error text-error hover:bg-error hover:text-white rounded-md'
          outline>
          Danger
        </Button>
        <Button color='light' className='rounded-md'>
          Light
        </Button>
        <Button
          color='dark'
          className='border border-dark text-dark hover:bg-dark hover:text-white rounded-md dark:text-white'
          outline>
          Dark
        </Button>
      </div>
    </>
  )
}

export default OutlineSqrButtonCode