Popover - HapplyUI

A popover component with arrow indicator, close button, and directional slide animations.

This component is not a standalone one but is used to support other components.

Installation

bunx @happlyui/cli@latest add popover

Dependencies

npm packages

@radix-ui/react-popover
@radix-ui/react-slot

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils

Usage

import * as Popover from "@/components/ui/popover"

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content>
    <Popover.Close />
    Content here
  </Popover.Content>
</Popover.Root>

Examples

Demo

Popover with icon, description, close button, and footer actions.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root>Open Popover</Button.Root>
  </Popover.Trigger>
  <Popover.Content className="w-80">
    <Popover.Close asChild>
      <CompactButton.Root size="large" variant="ghost">
        <CompactButton.Icon as={RiCloseLine} />
      </CompactButton.Root>
    </Popover.Close>
    Content here
  </Popover.Content>
</Popover.Root>

Position

Popovers positioned on top, left, and right sides.

<Popover.Content side="top">...</Popover.Content>
<Popover.Content side="left">...</Popover.Content>
<Popover.Content side="right">...</Popover.Content>

API Reference

Popover.Root

The root popover container. Passes through Radix Popover.Root props.

Prop	Type	Default	Description

Popover.Trigger

The element that triggers the popover.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Popover.Content

The popover content panel with arrow indicator.

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	The preferred side to position the popover
`align`	`'start' \| 'center' \| 'end'`	`'center'`	The alignment relative to the trigger
`sideOffset`	`number`	`12`	Distance in pixels from the trigger
`showArrow`	`boolean`	`true`	Show the arrow indicator pointing to the trigger
`unstyled`	`boolean`	`false`	Remove default styling (background, padding, ring)

Popover.Close

Close button positioned absolutely in the top-right corner.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot
`unstyled`	`boolean`	`false`	Remove default absolute positioning

Popover.Anchor

An optional anchor element for custom positioning.

Prop	Type	Default	Description