LORA UI

Popover

Bundle size

A popover component is a user interface element that provides additional information or interactive content when a user interacts with an element, such as clicking or hovering. It’s typically used for displaying supplementary information or controls without taking the user away from their current context.

Uncontrolled

"use client";


import * as Popover from "@lora-ui/popover";


export default function Base() {
  return (
    <Popover.Root defaultOpen={false}>
      <Popover.Trigger
        aria-label="trigger"
        className="box-border flex items-center whitespace-nowrap rounded-full border border-[#7f56d9] bg-[#7f56d9] p-2 text-sm font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#6941c6] disabled:pointer-events-none disabled:border-[#d0d5dd] disabled:border-[] disabled:bg-[#f2f4f7] disabled:text-[#d0d5dd] dark:border-[#9e77ed] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed] dark:disabled:border-[#85888e] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e]"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          className="h-5 w-5"
        >
          <path d="M17 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM17 15.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM3.75 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75ZM4.5 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM10 11a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 11ZM10.75 2.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM10 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.75 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM16.25 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
        </svg>
      </Popover.Trigger>
      <Popover.Content
        arrow
        arrowClassName="fill-white dark:fill-[#0c111d]
     [&>path:first-of-type]:stroke-[#eaecf0] dark:[&>path:first-of-type]:stroke-[#1f242f]
    [&>path:last-of-type]:stroke-[#eaecf0]"
        className="box-border w-[260px] rounded-lg border border-[#eaecf0] bg-[#ffffff] p-5 dark:border-[#1f242f] dark:bg-[#0c111d]"
      >
        <Popover.Description className="mb-5 text-[15px] font-medium text-[#101828] dark:text-[#f5f5f6]">
          Dimension
        </Popover.Description>
        <form action="" className="flex flex-col gap-2">
          <fieldset className="flex justify-between">
            <label
              htmlFor="width"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Width
            </label>
            <input
              id="width"
              type="text"
              defaultValue="100%"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
          <fieldset className="flex justify-between">
            <label
              htmlFor="max-width"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Max. width
            </label>
            <input
              id="max-width"
              type="text"
              defaultValue="300px"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
          <fieldset className="flex justify-between">
            <label
              htmlFor="height"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Height
            </label>
            <input
              id="height"
              type="text"
              defaultValue="25px"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
          <fieldset className="flex justify-between">
            <label
              htmlFor="max-height"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Max. height
            </label>
            <input
              id="max-height"
              type="text"
              defaultValue="none"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
        </form>
        <Popover.Close
          aria-label="close"
          className="absolute right-[15px] top-[15px]"
        >
          <svg
            width="15"
            height="15"
            viewBox="0 0 15 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
              fill="currentColor"
              fillRule="evenodd"
              clipRule="evenodd"
            ></path>
          </svg>
        </Popover.Close>
      </Popover.Content>
    </Popover.Root>
  );
}

Controlled

"use client";


import React from "react";
import * as Popover from "@lora-ui/popover";


export default function Base() {
  const [open, setOpen] = React.useState(false);


  function onOpenChange() {
    setOpen(!open);
  }


  return (
    <Popover.Root open={open} onOpenChange={onOpenChange} placement="bottom">
      <Popover.Trigger
        aria-label="trigger"
        className="box-border flex items-center whitespace-nowrap rounded-full border border-[#7f56d9] bg-[#7f56d9] p-2 text-sm font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#6941c6] dark:border-[#9e77ed] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed]"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          className="h-5 w-5"
        >
          <path d="M17 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM17 15.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM3.75 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75ZM4.5 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM10 11a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 11ZM10.75 2.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM10 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.75 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM16.25 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
        </svg>
      </Popover.Trigger>
      <Popover.Content
        arrow
        arrowClassName="fill-white dark:fill-[#0c111d]
     [&>path:first-of-type]:stroke-[#eaecf0] dark:[&>path:first-of-type]:stroke-[#1f242f]
    [&>path:last-of-type]:stroke-[#eaecf0]"
        className="box-border w-[260px] rounded-lg border border-[#eaecf0] bg-[#ffffff] p-5 dark:border-[#1f242f] dark:bg-[#0c111d]"
      >
        <Popover.Description className="mb-5 text-[15px] font-medium text-[#101828] dark:text-[#f5f5f6]">
          Dimension
        </Popover.Description>
        <form action="" className="flex flex-col gap-2">
          <fieldset className="flex justify-between">
            <label
              htmlFor="width"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Width
            </label>
            <input
              id="width"
              type="text"
              defaultValue="100%"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
          <fieldset className="flex justify-between">
            <label
              htmlFor="max-width"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Max. width
            </label>
            <input
              id="max-width"
              type="text"
              defaultValue="300px"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
          <fieldset className="flex justify-between">
            <label
              htmlFor="height"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Height
            </label>
            <input
              id="height"
              type="text"
              defaultValue="25px"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
          <fieldset className="flex justify-between">
            <label
              htmlFor="max-height"
              className="text-[13px] text-[#344054] dark:text-[#cecfd2]"
            >
              Max. height
            </label>
            <input
              id="max-height"
              type="text"
              defaultValue="none"
              className="h-[25px] w-[125px] rounded border border-[#d0d5dd] px-[10px] text-[13px] text-[#667085] dark:border-[#333741] dark:text-[#94969c]"
            />
          </fieldset>
        </form>
        <Popover.Close
          aria-label="close"
          className="absolute right-[15px] top-[15px]"
        >
          <svg
            width="15"
            height="15"
            viewBox="0 0 15 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
              fill="currentColor"
              fillRule="evenodd"
              clipRule="evenodd"
            ></path>
          </svg>
        </Popover.Close>
      </Popover.Content>
    </Popover.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/input

API Reference

Root

PropTypeDefaultExplanation
defaultOpenBooleanfalseInitial Open state if it is uncontrolled
placementString"bottom""bottom" | "top" | "left" | "right"
openBooleanfalseOpen state if it is controlled
onOpenChangeFunction(open: boolean) => {}

Trigger

PropTypeDefaultExplanation
disabledBooleanfalse

Content

PropTypeDefaultExplanation
arrowBooleanfalseShow arrow if it is true
arrowClassNameString

Heading

PropTypeDefaultExplanation
asReact.ElementType"h2""h1" | "h2" | "h3" | "h4"

Description

PropTypeDefaultExplanation

Close

PropTypeDefaultExplanation

Keyboard

CommandDescription
Tab
Move focus to the next focusable element
Shift+Tab
Move focus to the previous focusable element
Space
Activates the focused item.
Enter
Activates the focused item.
Escape
Closes the popup if the popup is visible

Other

All relevant ARIA attributes are automatically managed.