Popover

Popover shows rich content in a floating panel, anchored to the button that opens it.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/popover.tsx
Import from@viliha/vui-react/popover

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

popover-demo.tsx
import {
  Popover, PopoverTrigger, PopoverContent,
} from "@viliha/vui-react/popover";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open</Button>
      </PopoverTrigger>
      <PopoverContent>Place content for the popover here.</PopoverContent>
    </Popover>
  );
}

API Reference

PopoverContent is built on the Radix Popover primitive.

PropTypeDefault
align"start" | "center" | "end""center"
sideOffsetnumber4

Popover props

It takes no props of its own. Everything you pass reaches the underlying PopoverPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

PopoverAnchor props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

PopoverContent props

It takes no props of its own. Everything you pass reaches the underlying PopoverPrimitive.Content primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

PopoverDescription props

It takes no props of its own. Everything you pass reaches the underlying <p> element, so every attribute it accepts works here unchanged and nothing is invented on top.

PopoverHeader props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

PopoverTitle props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

PopoverTrigger props

It takes no props of its own. Everything you pass reaches the underlying PopoverPrimitive.Trigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.