PatternAvailable

Popover

An anchored panel for a compact interactive task.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/popover.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        View settings
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>View settings</PopoverTitle>
          <PopoverDescription>
            Adjust the name used in this example.
          </PopoverDescription>
        </PopoverHeader>
        <div className="mt-4 grid gap-2">
          <Label htmlFor="view-name">Name</Label>
          <Input id="view-name" defaultValue="All components" />
        </div>
      </PopoverContent>
    </Popover>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check closed, open, highlighted, selected and disabled states where supported.
Dialogs and menus must open from the keyboard. Escape closes non-persistent overlays and returns focus to the trigger. Tooltips and hover cards must also appear on focus.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
PopoverContent.side	top / bottom / left / right	bottom	Preferred placement.
PopoverContent.align	start / center / end	center	Alignment to the trigger.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name the panel and label all inputs. Escape and focus return are supplied by Base UI.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.