Create Next App

OPEN

Popover

A popover is a transient view that shows up on top of a content on the screen when a user clicks on a control button or within a defined area.

API Reference

Preview


"use client";
import { Button } from "@/components/Button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/Popover";
import React from "react";

const Page = () => {
  return (
    <Popover>
      <PopoverTrigger>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div>This is content</div>
      </PopoverContent>
    </Popover>
  );
}

Examples

Popover with background color

Popover with input and with increased width

Install the following dependencies:

npm install @radix-ui/react-popover

Copy and paste the following code into your project.


"use client";

import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";

import { cn } from "@/lib/utils";
import { XMarkIcon } from "@heroicons/react/24/solid";

const Popover = PopoverPrimitive.Root;

const PopoverTrigger = PopoverPrimitive.Trigger;

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(
  (
    { children, className, align = "center", sideOffset = 4, ...props },
    ref
  ) => (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        ref={ref}
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-72 p-7 rounded-md border bg-white text-gray-800 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      >
        {children}
        <PopoverClose
          className=" h-4 w-4 absolute top-2 right-2 hover:shadow-md outline-none cursor-pointer"
          aria-label="Close"
        >
          <XMarkIcon />
        </PopoverClose>
        <PopoverArrow className="fill-gray-100 h-3" />
      </PopoverPrimitive.Content>
    </PopoverPrimitive.Portal>
  )
);
PopoverContent.displayName = PopoverPrimitive.Content.displayName;

const PopoverArrow = PopoverPrimitive.PopoverArrow;

const PopoverClose = PopoverPrimitive.PopoverClose;

export { Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverClose };