Popover | Pol-ui - A beautiful and functional UI library for React and Next.js

A Popover is a popup component that is used to display additional information or actions when the user interacts with a button or a link.

Importation

Import the component from pol-ui to use the Popover element:

import { Popover } from "pol-ui";

Default Perspective Card

Default Popover

import { Popover } from "pol-ui";
 
const PopoverComponent = () => {
  return (
    <Popover>
      <div className="flex flex-col items-center rounded-2xl">
        <Avatar
          size="lg"
          img={"https://avatars.githubusercontent.com/u/63197171?v=4"}
        />
        <h2 className="text-lg font-bold mt-2">Pol Gubau Amores</h2>
        <p className="text-sm text-secondary-500">
          Software Engineer at <b>Pol-ui</b>
        </p>
 
        <div className="mt-4 flex items-center">
          <Button color="secondary">View Profile</Button>
          <Button color="primary" className="ml-2">
            Follow
          </Button>
        </div>
      </div>{" "}
    </Popover>
  );
};
export default PopoverComponent;

Props

Prop name	Type	Default	Description
trigger	React.ReactNode	undefined	The element that will trigger the popover.
label	string	'Open'	The label of the trigger.
children	React.ReactNode	undefined	The content of the popover.
rounded	RoundedSizes	RoundedSizesEnum.md	The border radius of the popover.
closeButton	boolean	true	If true, a close button will be displayed in the popover.
align	Align	AlignEnum.center	The alignment of the popover.
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	The side of the popover.
sideOffset	number	undefined	The offset of the popover from the side.
theme	PopoverTheme		The theme of the popover.

Examples

All rounded sizes

The amount of roundness of the popover popup can be customized using the rounded prop. The following example shows all the available rounded sizes.

Two cards in one parent

import { Popover } from "pol-ui";
 
const PopoverComponent = () => {
  return (
    <div className="flex gap-3 flex-wrap">
      {Object.keys(theme.popover.rounded).map((rounded) => (
        <Popover key={rounded}>
          <div className="flex flex-col items-center rounded-2xl">
            <Avatar
              size="lg"
              img={"https://avatars.githubusercontent.com/u/63197171?v=4"}
            />
            <h2 className="text-lg font-bold mt-2">Pol Gubau Amores</h2>
            <p className="text-sm text-secondary-500">
              Software Engineer at <b>Pol-ui</b>
            </p>
 
            <div className="mt-4 flex items-center">
              <Button color="secondary">View Profile</Button>
              <Button color="primary" className="ml-2">
                Follow
              </Button>
            </div>
          </div>{" "}
        </Popover>
      ))}
    </div>
  );
};
export default PopoverComponent;

Default Open

Two cards in one parent

import { Popover } from "pol-ui";
 
const PopoverComponent = () => {
  return (
    <Popover defaultOpen>
      <div className="flex flex-col items-center rounded-2xl">
        <Avatar
          size="lg"
          img={"https://avatars.githubusercontent.com/u/63197171?v=4"}
        />
        <h2 className="text-lg font-bold mt-2">Pol Gubau Amores</h2>
        <p className="text-sm text-secondary-500">
          Software Engineer at <b>Pol-ui</b>
        </p>
 
        <div className="mt-4 flex items-center">
          <Button color="secondary">View Profile</Button>
          <Button color="primary" className="ml-2">
            Follow
          </Button>
        </div>
      </div>{" "}
    </Popover>
  );
};
export default PopoverComponent;

Controlled

Two cards in one parent

import { Popover, useBoolean } from "pol-ui";
 
const PopoverComponent = () => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <>
      Open state is {value.toString()}
      <Popover open={value} onOpenChange={toggle}>
        <ExampleContent />
      </Popover>
    </>
  );
};
export default PopoverComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface PopoverTheme = {
  base: string
  content: string
  animation: string
  rounded: RoundedSizesTypes
  closeButton: string
}