Popover
Freev1.0.0A panel tied to a control, on an ink leader, that flips and scrolls to fit.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/notchset/popover";
export function Filter() {
return (
<Popover>
<PopoverTrigger>Filter</PopoverTrigger>
<PopoverContent>
<PopoverHeader><PopoverTitle>Filter runs</PopoverTitle></PopoverHeader>
<PopoverBody>…</PopoverBody>
<PopoverFooter>…</PopoverFooter>
</PopoverContent>
</Popover>
);
}Props
side (PopoverContent)–'bottom' | 'top' | 'left' | 'right'Where it opens; it flips when there is no room. Default bottom.
align (PopoverContent)–'start' | 'center' | 'end'Alignment to the trigger. Default start.
container (PopoverContent)–HTMLElementPortal target; defaults to the nearest Notchset scope.
Anatomy
- Same parts as shadcn's Popover, plus Header, Body and Footer for the designed layout.
- The filter in the demo counts matches from the draft and applies with a loading Button.
- The note guards its draft by keeping open in onOpenChange and asking first.
Popoverdata-slot="popover"Root; open state.
PopoverTriggerdata-slot="popover-trigger"The control it hangs from.
PopoverContentdata-slot="popover-content"The panel, its leader and placement.
PopoverHeader / PopoverBody / PopoverFooterdata-slot="popover-header"52px title row, scrolling body, 60px actions row.
PopoverTitle / PopoverDescription / PopoverClosedata-slot="popover-title"Labels and a close control.
Source
components/ui/notchset/popover.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/popover.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/popover.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add @base-ui/react@^1 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/popover.tsx
- lib/beautiful-ui/notchset/popover.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Filters or a short form tied to one control
- Detail you open on purpose and act on
Use something else when
- A preview on hover: use Hover Card
- A list of commands: use Dropdown Menu
- A decision that blocks the page: use Alert Dialog
Mistakes to avoid
- To guard an unsaved draft, control open and keep it open in onOpenChange until the person confirms
- Don't put a whole page in a popover: use Sheet
Agents find it by
- popover, filter panel, inline form, note, small panel on a control, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/popover.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter / Space
- Open from the trigger
- Esc
- Close and return focus
Accessibility
- The trigger has aria-expanded and aria-haspopup (from the primitive)
- Focus moves into the panel on open and back to the trigger on close
- The leader is decorative
Motion
- Open
- Unrolls from the trigger's side (320ms)
- Close
- Traces back (180ms)
Responsive
- Never wider than the viewport less 24px; the body scrolls when the panel is capped.
Performance
- Mounted only while open.
Changelog
v1.0.0 · 2026-10-04
First release
