Popover
- Home
- Popover
Basic Popover
Products
Pricing
Sample Code
Show Code
Â
Copy Code
Â
import { PopoverButton, PopoverPanel, Popover } from '@headlessui/react'
const BasicPopoverCode = () => {
return (
<div>
<div className='w-fit'>
<div className='flex gap-8 bg-lightgray dark:bg-dark 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'>
Solutions
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-darkborder rounded-sm bg-white dark:bg-dark 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-lightgray hover:dark:bg-darkmuted'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-darklink text-sm'>
Measure actions your users take
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-darklink text-sm'>
Create your own targeted content
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-darklink 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-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-darklink 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
Sample Code
Show Code
Â
Copy Code
Â
import { PopoverButton, PopoverPanel, Popover } from '@headlessui/react'
const GroupingPopoverCode = () => {
return (
<div>
<div className='w-fit'>
<div className='flex gap-8 bg-lightgray dark:bg-dark 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'>
Products
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-darkborder rounded-sm bg-white dark:bg-dark 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-lightgray hover:dark:bg-darkmuted'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-darklink text-sm'>
Measure actions your users take
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-darklink text-sm'>
Create your own targeted content
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-darklink 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-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-darklink 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'>
Solutions
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-darkborder rounded-sm bg-white dark:bg-dark 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-lightgray hover:dark:bg-darkmuted'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-darklink text-sm'>
Measure actions your users take
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-darklink text-sm'>
Create your own targeted content
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-darklink 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-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-darklink 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'>
Pricing
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='divide-y divide-border dark:divide-darkborder rounded-sm bg-white dark:bg-dark 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-lightgray hover:dark:bg-darkmuted'
href='#'>
<p className='text-sm font-semibold text-ld'>Insights</p>
<p className='text-darklink text-sm'>
Measure actions your users take
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Automations</p>
<p className='text-darklink text-sm'>
Create your own targeted content
</p>
</a>
<a
className='block rounded-sm py-2 px-3 transition hover:bg-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Reports</p>
<p className='text-darklink 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-lightgray hover:dark:bg-darkmuted '
href='#'>
<p className='text-sm font-semibold text-ld'>Documentation</p>
<p className='text-darklink text-sm'>
Start integrating products and tools
</p>
</a>
</div>
</PopoverPanel>
</Popover>
</div>
</div>
</div>
)
}
export default GroupingPopoverCode
Popover Width
Sample Code
Show Code
Â
Copy Code
Â
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
const PopoverWidthCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightgray dark:bg-dark 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'>
Open Popover
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='w-52 py-4 rounded-sm bg-white dark:bg-dark 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
Sample Code
Show Code
Â
Copy Code
Â
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
const PopoverPositionCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightgray dark:bg-dark 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'>
Top Popover
</PopoverButton>
<PopoverPanel
transition
anchor='top start'
className='w-52 py-4 rounded-sm bg-white dark:bg-dark 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
Sample Code
Show Code
Â
Copy Code
Â
import {
Popover,
PopoverButton,
PopoverPanel,
PopoverBackdrop,
} from '@headlessui/react'
const PopoverBgDropcode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightgray dark:bg-dark 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'>
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 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
Sample Code
Show Code
Â
Copy Code
Â
import { PopoverButton, PopoverPanel, Popover } from "@headlessui/react";
const PopoverTransitionCode = () => {
return (
<div>
<div className='w-fit'>
<div className='gap-8 bg-lightgray dark:bg-dark 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'>
Open Popover
</PopoverButton>
<PopoverPanel
transition
anchor='bottom'
className='w-52 z-[60] py-4 rounded-sm bg-white dark:bg-dark 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
Sample Code
Show 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-lightgray dark:bg-dark 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'>
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 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
Sample Code
Show 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-lightgray dark:bg-dark 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'>
Open Popover
</PopoverButton>
<PopoverPanel
anchor='bottom'
className='w-52 py-4 rounded-sm bg-white dark:bg-dark 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
Sample Code
Show 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-lightgray dark:bg-dark 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'>
Render As Form View
</PopoverButton>
<PopoverPanel
as='form'
className='w-60 py-4 rounded-sm bg-white dark:bg-dark 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
Settings
Theme Option
Theme Direction
Theme Colors
BLUE_THEME
Â
AQUA_THEME
Â
PURPLE_THEME
Â
GREEN_THEME
Â
CYAN_THEME
Â
ORANGE_THEME
Â
Layout Type
Container Option
Sidebar Type
Card With
Theme Border Radius
Current Value: 7