Popover
An accessible popup anchored to a button.
Popover wraps the Base UI Popover
primitive, positions its popup with Base UI's Positioner and marks each part
with data-slot. Detached triggers are available through PopoverCreateHandle.
Installation
npx shadcn@latest add @kosori/popoverExample
popover-example.tsx
import { IconX } from '@tabler/icons-react';
import { Button } from '@/components/ui/button';
import {
Popover,
PopoverClose,
PopoverDescription,
PopoverPopup,
PopoverTitle,
PopoverTrigger,
} from '@/components/ui/popover';
const PopoverExample = () => (
<Popover>
<PopoverTrigger render={<Button variant='outline' />}>
Open Popover
</PopoverTrigger>
<PopoverPopup className='w-80'>
<PopoverClose
aria-label='Close'
className='absolute end-2 top-2'
render={<Button size='icon' variant='ghost' />}
>
<IconX />
</PopoverClose>
<div className='mb-2'>
<PopoverTitle>Notifications</PopoverTitle>
<PopoverDescription>
You are all caught up. Good job!
</PopoverDescription>
</div>
<PopoverClose render={<Button variant='outline' />}>Close</PopoverClose>
</PopoverPopup>
</Popover>
);
export default PopoverExample;
Usage
import { Button } from '@/components/ui/button';
import {
Popover,
PopoverPopup,
PopoverTrigger,
} from '@/components/ui/popover';
const PopoverDemo = () => (
<Popover>
<PopoverTrigger render={<Button variant='outline' />}>
Open popover
</PopoverTrigger>
<PopoverPopup>Popover content</PopoverPopup>
</Popover>
);