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

import { Toast, ToastToggle } from 'flowbite-react'
import { HiFire } from 'react-icons/hi'

const DefaultToastCode = () => {
  return (
    <>
      <div>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-200'>
            <HiFire className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>Set yourself free.</div>
          <ToastToggle />
        </Toast>
      </div>
    </>
  )
}

export default DefaultToastCode

import { Toast, ToastToggle } from 'flowbite-react'
import { HiCheck, HiExclamation, HiX } from 'react-icons/hi'

const ToastColorsCode = () => {
  return (
    <>
      <div className='flex flex-col gap-4'>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200'>
            <HiCheck className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>
            Item moved successfully.
          </div>
          <ToastToggle />
        </Toast>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200'>
            <HiX className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>Item has been deleted.</div>
          <ToastToggle />
        </Toast>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200'>
            <HiExclamation className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>
            Improve password difficulty.
          </div>
          <ToastToggle />
        </Toast>
      </div>
    </>
  )
}

export default ToastColorsCode