Popover

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download popover -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Popover, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import * as React from "react";
export default function PopoverExample() {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <Button variant="secondary">Open popover</Button>
      <PopoverContent side="bottom">
        Popover content
      </PopoverContent>
    </Popover>
  );
}

Examples

Default

import { Popover, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
<Popover >
  <Button variant="tertiary">Open popover</Button>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-sm text-neutral-mid">
          Set the dimensions for the layer.
        </p>
      </div>
      <div className="grid gap-2">
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="width">Width</Label>
          <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="maxWidth">Max. width</Label>
          <Input
            id="maxWidth"
            defaultValue="300px"
            className="col-span-2 h-8"
          />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <Label htmlFor="height">Height</Label>
          <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>;

Simple Content

import { Popover, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
<Popover>
  <Button variant="tertiary">Open popover</Button>
  <PopoverContent className="w-80">
    <div className="space-y-2">
      <h4 className="font-medium leading-none">About</h4>
      <p className="text-sm text-neutral-mid">
        Popovers display rich content in a portal, anchored to a trigger
        element.
      </p>
    </div>
  </PopoverContent>
</Popover>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

PopoverContent

PopoverTrigger

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.