More
204
184 column. 20 gutter. The page is the measure.
Popover
Places non-modal content above the page with the native Popover API and light dismiss.
Preview
Module grid
204px modules: a 184px column and a 20px gutter.
In action
When to use
Use it for
- Secondary detail the user asks for and dismisses: a definition, a small form, a legend.
- align="end" when the trigger sits at the right edge.
Not for
- Menus; use DropdownMenu.
- Anything that must block the page; use Dialog.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Popover, PopoverBody, PopoverTitle } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/popover.
2. Vendor the source
npx @noorddev/vlak-cli add popover
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/popover.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Popover, PopoverBody, PopoverTitle } from "@noorddev/vlak-react";
<Popover trigger="Details" align="start" aria-label="Module grid">
<PopoverTitle>Module grid</PopoverTitle>
<PopoverBody>204px modules: a 184px column and a 20px gutter.</PopoverBody>
</Popover>Props
Popover
The native Popover API. The panel lives in the top layer; light dismiss comes from the platform. Anchor positioning places it where supported; otherwise it is measured, follows scroll and resize, and flips above the trigger when there is no room below.
| Prop | Type | Default | Description |
|---|---|---|---|
triggerrequired | ReactNode | Trigger content, rendered in a ghost button. | |
align | "end" | "start" | "start" | Where the panel sits relative to the trigger. |
Also accepts HTMLAttributes<HTMLDivElement>.
PopoverBody
Also accepts HTMLAttributes<HTMLParagraphElement>.
PopoverTitle
Also accepts HTMLAttributes<HTMLSpanElement>.
Keyboard
| Keys | Does |
|---|---|
| Enter, Space | Opens or closes from the trigger |
| Escape | Closes (platform light dismiss) |
| Tab | Moves into the panel |
Accessibility
- The native Popover API: the panel is popover="auto" in the top layer; the trigger is a ghost Button with popovertarget, so the platform manages aria-expanded and light dismiss.
- Name the panel with aria-label or aria-labelledby; PopoverTitle is visible text only.
- Placed by CSS anchor positioning where supported, else measured and flipped above when there is no room below.
Markup
<button class="rs-btn-ghost rs-btn-sm" popovertarget="info">Details</button> <div id="info" popover="auto" class="rs-popover"><span class="rs-popover-title">Module grid</span><p class="rs-popover-body">204px modules: a 184px column and a 20px gutter.</p></div>
Classes
.rs-popover.rs-popover-title.rs-popover-body