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

import { Badge } from 'flowbite-react'

const DefautBadgeCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-2 mt-2'>
        <Badge color='primary'>Primary</Badge>
        <Badge color='secondary'>Secondary</Badge>
        <Badge color='success'>Success</Badge>
        <Badge color='info'>Info</Badge>
        <Badge color='warning'>Warning</Badge>
        <Badge color='error'>Danger</Badge>
      </div>
    </>
  )
}

export default DefautBadgeCode

import { Badge } from 'flowbite-react'

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

export default LightBadgeCode

import { Badge } from 'flowbite-react'

const LinkBadgeCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-2'>
        <a href='#'>
          <Badge color='primary'>Badge Link 1</Badge>
        </a>

        <a href='#'>
          <Badge color='secondary'>Badge Link 2</Badge>
        </a>

        <a href='#'>
          <Badge color='error'>Badge Link 3</Badge>
        </a>

        <a href='#'>
          <Badge color='warning'>Badge Link 4</Badge>
        </a>
      </div>
    </>
  )
}

export default LinkBadgeCode

import { Badge } from 'flowbite-react';
import { HiCheck, HiClock } from 'react-icons/hi';

const BadgeWithIconCode = () => {
  return (
    <>
      <div className="flex flex-wrap gap-2 mt-2">
        <Badge icon={HiCheck} color="primary">
          2 minutes ago
        </Badge>
        <Badge color="success" icon={HiClock}>
          3 days ago
        </Badge>
        <Badge color="error" icon={HiCheck}>
          4 days ago
        </Badge>
        <Badge color="info" icon={HiClock}>
          5 days ago
        </Badge>
      </div>
    </>
  );
};

export default BadgeWithIconCode;

import { Badge } from 'flowbite-react'
import { HiCheck, HiClock } from 'react-icons/hi'

const IconCode = () => {
  return (
    <>
      <div>
        <div className='flex flex-wrap gap-2'>
          <Badge color='primary' icon={HiCheck} />
          <Badge color='secondary' icon={HiClock} />
          <Badge color='primary' size='sm' icon={HiCheck} />
          <Badge color='secondary' size='sm' icon={HiClock} />
          <Badge color='error' size='sm' icon={HiCheck} />
          <Badge color='warning' size='sm' icon={HiClock} />
        </div>
        <div className='flex flex-wrap gap-2 mt-2'>
          <Badge color='lightprimary' icon={HiCheck} />
          <Badge color='lightsecondary' icon={HiClock} />
          <Badge color='lightprimary' size='sm' icon={HiCheck} />
          <Badge color='lightsecondary' size='sm' icon={HiClock} />
          <Badge color='lighterror' size='sm' icon={HiCheck} />
          <Badge color='lightwarning' size='sm' icon={HiClock} />
        </div>
      </div>
    </>
  )
}

export default IconCode

import { Badge } from 'flowbite-react'

const SizesCode = () => {
  return (
    <>
      <div>
        <div className='flex flex-wrap gap-2'>
          <Badge color='primary' size='xs'>
            Primary
          </Badge>
          <Badge color='secondary' size='xs'>
            Secondary
          </Badge>
          <Badge color='success' size='xs'>
            Success
          </Badge>
          <Badge color='info' size='xs'>
            Info
          </Badge>
        </div>
        <div className='flex flex-wrap gap-2 mt-2'>
          <Badge color='primary' size='sm'>
            Primary
          </Badge>
          <Badge color='secondary' size='sm'>
            Secondary
          </Badge>
          <Badge color='success' size='sm'>
            Success
          </Badge>
          <Badge color='info' size='sm'>
            Info
          </Badge>
        </div>
      </div>
    </>
  )
}

export default SizesCode