Docs
Popover

Popover

Displays rich content in a portal, triggered by a button.

DocsAPI ReferenceSource

Installation

Install the following dependencies:

npm install @radix-ui/react-popover

Copy and paste the following code into your project.

'use client';
 
import * as PopoverPrimitive from '@radix-ui/react-popover';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
 
const Popover = PopoverPrimitive.Root;
 
const PopoverTrigger = PopoverPrimitive.Trigger;
 
const PopoverContent = forwardRef<
    ElementRef<typeof PopoverPrimitive.Content>,
    ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
    <PopoverPrimitive.Portal>
        <PopoverPrimitive.Content
            ref={ref}
            align={align}
            sideOffset={sideOffset}
            className={clsx(styles.popover, className)}
            {...props}
        />
    </PopoverPrimitive.Portal>
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
export { Popover, PopoverContent, PopoverTrigger };

Update the import paths to match your project setup.

Usage

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
<Popover>
    <PopoverTrigger>Open</PopoverTrigger>
    <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>