Popover

Popover is a simple dialog alert which can have details of the content. It can either have a confirm, cancel button or any action that can be triggered by the user's decision.

import { Popover } from "rizzui";

Default

A simple Popover component.

import { Popover, Title, Text, Button } from "rizzui";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" fontWeight="medium">
          Default popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}

Actionable

You can create actionable Popover using state.

import React from "react";
import { Popover, Title, Text, Button } from "rizzui";
import { TrashIcon } from "@heroicons/react/24/solid";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline" color="danger">
          <TrashIcon className="w-5 h-auto" />
        </Button>
      </Popover.Trigger>
      <Popover.Content>
        {({ setOpen }) => (
          <div className="w-56">
            <Title as="h6">Delete the task</Title>
            <Text>Are you sure you want to delete the task?</Text>
            <div className="flex justify-end gap-3 mb-1">
              <Button size="sm" variant="outline">
                No
              </Button>
              <Button size="sm" onClick={() => setOpen(false)}>
                Yes
              </Button>
            </div>
          </div>
        )}
      </Popover.Content>
    </Popover>
  );
}

Controlled

You can control Popover state with isOepn and setIsOpen props:

import React, { useState } from "react";
import { Popover, Title, Text, Button } from "rizzui";

export default function App() {
  const [isOpen, setIsOpen] = useState();
  return (
    <Popover isOepn={isOepn} setIsOpen={setIsOpen}>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" className="!mb-0 font-semibold">
          Controlled popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}

With Backdrop Overlay

You can render any thing using our Popover component.

import React from "react";
import { Popover, Button, Avatar } from "rizzui";

export default function App() {
  return (
    <Popover enableOverlay>
      <Popover.Trigger>
        <div className="w-12 cursor-pointer">
          <Avatar
            name="Jane Doe"
            src="https://randomuser.me/api/portraits/women/40.jpg"
            size="lg"
          />
        </div>
      </Popover.Trigger>
      <Popover.Content>
        {({ setOpen }) => (
          <div className="font-geist">
            <div className="mb-3 flex items-center gap-3">
              <Avatar
                name="John Doe"
                src="https://randomuser.me/api/portraits/women/40.jpg"
                className="ring-2 ring-blue ring-offset-2"
                size="lg"
              />
              <div>
                <Text className="text-base font-semibold text-gray-900">
                  Fred Chaparro
                </Text>
                <Text className="text-sm text-gray-500">@fredchaparro</Text>
              </div>
            </div>
            <div className="max-w-[240px] text-sm">
              <Text className="text-gray-700">
                Full-stack Developer, love to work with @redq. 🎉{" "}
              </Text>
              <div className="mt-3 inline-flex gap-3 text-gray-500">
                <Text>
                  <Text as="span" className="font-medium text-gray-700">
                    8
                  </Text>{" "}
                  Following
                </Text>
                <Text>
                  <Text as="span" className="font-medium text-gray-700">
                    10.5k
                  </Text>{" "}
                  Followers
                </Text>
              </div>
            </div>
            <Button
              className="mt-4 w-full"
              size="sm"
              onClick={() => setOpen(false)}
            >
              Follow
            </Button>
          </div>
        )}
      </Popover.Content>
    </Popover>
  );
}

API Reference

---

Popover Props

Here is the API documentation of the Popover component.

Props	Type	Description	Default
children	__	Use Popover.Trigger & Popover.Content as childrens	__
gap	number	Set the offset value from Popover.Trigger to Popover.Content	"8"
isOpen	boolean	Pass isOpen state to toggle the popover content	__
setIsOpen	Dispatch<SetStateAction<boolean>>	Pass setIsOpen to set open value	__
size	PopoverSizes	Supported popover sizes are:	"md"
rounded	PopoverRounded	The rounded variants are:	"md"
placement	PopoverPlacements	Supported popover placements are:	"bottom"
shadow	PopoverShadow	Supported popover shadows are:	"md"
animation	PopoverAnimation	Supported popover animations are:	"zoomIn"
showArrow	boolean	Whether popover arrow should be shown or hidden	"true"
arrowClassName	string	Add custom classes to the arrow	__
enableOverlay	boolean	Whether popover backdrop overlay should be shown or hidden	"false"
overlayClassName	string	Add custom classes to the overlay	__

Popover Sizes

type PopoverSizes = "sm" | "md" | "lg" | "xl";

Popover Rounded

type PopoverRounded = "sm" | "md" | "lg" | "none" | "pill";

Popover Placements

type PopoverPlacements =
  | "left"
  | "right"
  | "top"
  | "bottom"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end";

Popover Shadows

type PopoverShadow = "sm" | "md" | "lg" | "xl";

Popover Animations

type PopoverAnimation = "fadeIn" | "zoomIn" | "slideIn";