Components

Popover

Use for lightweight panels, helper content, and contextual controls

Popover is for small non-blocking panels.

Import

import { Popover, PopoverTrigger, PopoverContent, Button } from "@downcity/ui";

Basic Example

import { Button, Popover, PopoverTrigger, PopoverContent } from "@downcity/ui";

export function FilterPopover() {
  return (
    <Popover>
      <PopoverTrigger render={<Button size="sm" variant="ghost" />}>
        Filter
      </PopoverTrigger>
      <PopoverContent className="w-72 p-4">
        Put small filters or helper content here.
      </PopoverContent>
    </Popover>
  );
}

Good Fits

Lightweight settings
Helper content
Small filter panels

Usage Notes

Use Popover for short non-blocking interaction
Switch to Dialog or Sheet for larger flows

Label

Use for field titles, form naming, and accessible input labeling

Separator

Use for lightweight visual separation between related content blocks

Table of Contents

Popover Import Basic Example Good Fits Usage Notes