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

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

const DefaultPopoverCode = () => {
  return (
    <>
      <div>
        <Popover
          aria-labelledby='default-popover'
          content={
            <div className='w-64 text-sm text-gray-500 dark:text-gray-400'>
              <div className='border-b rounded-t-3xl border-gray-200 bg-gray-100 px-3 py-2 dark:border-gray-600 dark:bg-gray-700'>
                <h3
                  id='default-popover'
                  className='font-semibold text-gray-900 dark:text-white'>
                  Popover title
                </h3>
              </div>
              <div className='px-3 py-2'>
                <p>
                  And here's some amazing content. It's very engaging. Right?
                </p>
              </div>
            </div>
          }>
          <Button color='primary'>Default popover</Button>
        </Popover>
      </div>
    </>
  )
}

export default DefaultPopoverCode

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

const CompanyProfileCode = () => {
  return (
    <>
      <div>
        <Popover
          aria-labelledby='profile-popover'
          content={
            <div className='w-64 p-3 '>
              <div className='mb-2 flex items-center justify-between'>
                <a href='#'>
                  <img
                    className='h-10 w-10 rounded-full'
                    src='/images/profile/user-3.jpg'
                    alt='Jese Leos'
                  />
                </a>
                <div>
                  <button
                    type='button'
                    className='rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-primary dark:hover:bg-primaryemphasis dark:focus:ring-blue-600 '>
                    Follow
                  </button>
                </div>
              </div>
              <p
                id='profile-popover'
                className='text-base font-semibold leading-none text-gray-900 dark:text-white'>
                <a href='#'>Jese Leos</a>
              </p>
              <p className='mb-3 text-sm font-normal'>
                <a href='#' className='hover:underline'>
                  @jeseleos
                </a>
              </p>
              <p className='mb-4 text-sm'>
                Open-source contributor. Building{' '}
                <a
                  href='#'
                  className='text-primary hover:underline dark:text-primary'>
                  Material IM
                </a>
                .
              </p>
              <ul className='flex text-sm'>
                <li className='me-2'>
                  <a href='#' className='hover:underline'>
                    <span className='font-semibold text-gray-900 dark:text-white'>
                      799
                    </span>
                    <span>Following</span>
                  </a>
                </li>
                <li>
                  <a href='#' className='hover:underline'>
                    <span className='font-semibold text-gray-900 dark:text-white'>
                      3,758
                    </span>
                    <span>Followers</span>
                  </a>
                </li>
              </ul>
            </div>
          }>
          <Button color='primary'>Company profile</Button>
        </Popover>
      </div>
    </>
  )
}

export default CompanyProfileCode

import { Popover, Label, TextInput, Button } from 'flowbite-react'
import { useState } from 'react'
import { BiCaretDown } from 'react-icons/bi'

const ControlledPopoverCode = () => {
  const [open, setOpen] = useState(false)

  return (
    <>
      <div>
        <Popover
          aria-labelledby='area-popover'
          open={open}
          onOpenChange={setOpen}
          content={
            <div className='flex w-64 flex-col gap-4 p-4 text-sm text-gray-500 dark:text-gray-400 '>
              <div>
                <h2 id='area-popover' className='text-base text-gray-500'>
                  Area (sqft)
                </h2>
                <div className='mb-2 block'>
                  <Label htmlFor='minsqft'>Minimum sqft</Label>
                </div>
                <TextInput id='minsqft' type='number' className='!form-control' />
              </div>
              <div>
                <div className='mb-2 block'>
                  <Label htmlFor='maxsqft'>Maximum sqft</Label>
                </div>
                <TextInput id='maxsqft' type='number' className='!form-control' />
              </div>
              <div className='flex gap-2'>
                <Button color='gray'>Reset</Button>
                <Button color='primary' onClick={() => setOpen(false)}>
                  Save
                </Button>
              </div>
            </div>
          }>
          <Button color='primary'>
            Area <BiCaretDown className='ml-2' />
          </Button>
        </Popover>
      </div>
    </>
  )
}

export default ControlledPopoverCode

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

const DisableArrowCode = () => {
  return (
    <>
      <div>
        <Popover
          aria-labelledby='default-popover'
          content={
            <div className='w-64 text-sm text-gray-500 dark:text-gray-400 '>
              <div className='border-b rounded-t-3xl border-gray-200 bg-gray-100 px-3 py-2 dark:border-gray-600 dark:bg-gray-700'>
                <h3
                  id='default-popover'
                  className='font-semibold text-gray-900 dark:text-white'>
                  Popover title
                </h3>
              </div>
              <div className='px-3 py-2'>
                <p>
                  And here's some amazing content. It's very engaging. Right?
                </p>
              </div>
            </div>
          }
          arrow={false}>
          <Button color='primary'>No Arrow Popover</Button>
        </Popover>
      </div>
    </>
  )
}

export default DisableArrowCode