Component Library
Browse and explore components
Popover
A Popover is a UI component that displays contextual content in a floating panel triggered by user interaction.
Basic Popover
Products
Pricing
Component Code
Copy Code
import { PopoverButton, PopoverPanel, Popover } from '@headlessui/react'
const BasicPopoverCode = () => {
return (
<div>
<div className='w-fit'>
<div className='flex gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm'>
<div className='text-sm font-semibold text-ld'>Products</div>
<Popover>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Solutions
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-gray-600 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary hover:dark:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-sm'>
Measure actions your users take
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary hover:dark:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-sm'>
Create your own targeted content
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary hover:dark:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-sm'>
Keep track of your growth
</p>
</a>
</div>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary hover:dark:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-sm'>
Start integrating products and tools
</p>
</a>
</div>
</PopoverPanel>
</Popover>
<div className='text-sm font-semibold text-ld'>Pricing</div>
</div>
</div>
</div>
)
}
export default BasicPopoverCode
Grouping Related Popover
Component Code
Copy Code
import { PopoverButton, PopoverPanel, Popover } from '@headlessui/react'
const GroupingPopoverCode = () => {
return (
<div>
<div className='w-fit'>
<div className='flex gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm'>
<Popover>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Products
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-gray-600 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-sm'>Measure actions your users take</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-sm'>Create your own targeted content</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-sm'>Keep track of your growth</p>
</a>
</div>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-sm'>
Start integrating products and tools
</p>
</a>
</div>
</PopoverPanel>
</Popover>
<Popover>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Solutions
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-gray-600 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-sm'>Measure actions your users take</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-sm'>Create your own targeted content</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-sm'>Keep track of your growth</p>
</a>
</div>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-sm'>
Start integrating products and tools
</p>
</a>
</div>
</PopoverPanel>
</Popover>
<Popover>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Pricing
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-gray-600 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-sm'>Measure actions your users take</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-sm'>Create your own targeted content</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-sm'>Keep track of your growth</p>
</a>
</div>
<div className='p-3'>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightprimary dark:hover:bg-darkprimary '
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-sm'>
Start integrating products and tools
</p>
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default GroupingPopoverCode
Popover Width
Component Code
Copy Code
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
const PopoverWidthCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm flex justify-center'>
<Popover className='relative '>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Open Popover
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='w-52 py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='flex flex-col gap-1'>
<a href='/analytics' className='ui-dropdown-item'>
Analytics
</a>
<a href='/engagement' className='ui-dropdown-item'>
Engagement
</a>
<a href='/security' className='ui-dropdown-item'>
Security
</a>
<a href='/integrations' className='ui-dropdown-item'>
Integrations
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default PopoverWidthCode
Popover Positioning
Component Code
Copy Code
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
const PopoverPositionCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm w-full flex justify-center'>
<Popover className='relative flex justify-center'>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Top Popover
</PopoverButton>
<PopoverPanel
transition
anchor='top start'
className='w-52 py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='flex flex-col gap-1'>
<a href='/analytics' className='ui-dropdown-item'>
Analytics
</a>
<a href='/engagement' className='ui-dropdown-item'>
Engagement
</a>
<a href='/security' className='ui-dropdown-item'>
Security
</a>
<a href='/integrations' className='ui-dropdown-item'>
Integrations
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default PopoverPositionCode
Popover Backdrop
Component Code
Copy Code
import {
Popover,
PopoverButton,
PopoverPanel,
PopoverBackdrop,
} from '@headlessui/react'
const PopoverBgDropcode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm flex justify-center'>
<Popover className='relative '>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Open Popover
</PopoverButton>
<PopoverBackdrop className='fixed inset-0 bg-black/15 z-50' />
<PopoverPanel
transition
anchor='bottom'
className='w-52 z-[60] py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='flex flex-col gap-1'>
<a href='/analytics' className='ui-dropdown-item'>
Analytics
</a>
<a href='/engagement' className='ui-dropdown-item'>
Engagement
</a>
<a href='/security' className='ui-dropdown-item'>
Security
</a>
<a href='/integrations' className='ui-dropdown-item'>
Integrations
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default PopoverBgDropcode
Popover Transitions
Component Code
Copy Code
import { PopoverButton, PopoverPanel, Popover } from '@headlessui/react'
const PopoverTransitionCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm flex justify-center'>
<Popover className='relative '>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Open Popover
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='w-52 z-[60] py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-out data-[closed]:scale-95 data-[closed]:opacity-0'>
<div className='flex flex-col gap-1'>
<a href='/analytics' className='ui-dropdown-item'>
Analytics
</a>
<a href='/engagement' className='ui-dropdown-item'>
Engagement
</a>
<a href='/security' className='ui-dropdown-item'>
Security
</a>
<a href='/integrations' className='ui-dropdown-item'>
Integrations
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default PopoverTransitionCode
Framer Motion Popover
Component Code
Copy Code
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'
const FramerPopoverCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm flex justify-center'>
<Popover>
{({ open }) => (
<>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Framer Motion
</PopoverButton>
<AnimatePresence>
{open && (
<PopoverPanel
static
as={motion.div}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
anchor='bottom'
className='flex origin-top flex-col w-52 z-[60] py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md'>
<a href='/analytics' className='ui-dropdown-item'>
Analytics
</a>
<a href='/engagement' className='ui-dropdown-item'>
Engagement
</a>
<a href='/security' className='ui-dropdown-item'>
Security
</a>
<a href='/integrations' className='ui-dropdown-item'>
Integrations
</a>
</PopoverPanel>
)}
</AnimatePresence>
</>
)}
</Popover>
</div>
</div>
</div>
)
}
export default FramerPopoverCode
Closing Popovers Manually
Component Code
Copy Code
import {
CloseButton,
Popover,
PopoverButton,
PopoverPanel,
} from '@headlessui/react'
import MyLink from '../MyLink'
const ClosingManuallyCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm flex justify-center'>
<Popover>
<PopoverButton className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Open Popover
</PopoverButton>
<PopoverPanel
anchor='bottom'
className='w-52 py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<CloseButton as={MyLink}>Insights</CloseButton>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default ClosingManuallyCode
Rendering Different Elements
Component Code
Copy Code
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { forwardRef } from 'react'
let MyCustomButton = forwardRef(function (props: any, ref: any) {
return <button className='...' ref={ref} {...props} />
})
const RenderPopoverCode = () => {
return (
<div className='w-fit'>
<div className='flex gap-8 bg-lightprimary dark:bg-darkprimary py-2 px-4 rounded-sm'>
<Popover as='nav'>
<PopoverButton
as={MyCustomButton}
className='block text-sm font-semibold text-ld focus:outline-none data-[active]:text-primary data-[hover]:text-primary data-[focus]:outline-1 data-[focus]:outline-white hover:cursor-pointer'>
Render As Form View
</PopoverButton>
<PopoverPanel
as='form'
className='w-60 py-4 rounded-sm bg-white dark:bg-dark-header text-sm shadow-md dark:shadow-dark-md transition duration-200 ease-in-out [--anchor-gap:var(--spacing-5)] data-[closed]:-translate-y-1 data-[closed]:opacity-0'>
<div className='flex flex-col gap-1'>
<a href='/analytics' className='ui-dropdown-item'>
Analytics
</a>
<a href='/engagement' className='ui-dropdown-item'>
Engagement
</a>
<a href='/security' className='ui-dropdown-item'>
Security
</a>
<a href='/integrations' className='ui-dropdown-item'>
Integrations
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
)
}
export default RenderPopoverCode