Popover
A surface anchored to its trigger that flips and shifts to stay in the window.
Features
- Anchored to its trigger; flips and shifts to stay in the window.
Use it for
- Details on demand.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Popover } from 'runets'
<Popover trigger="Details" title="Pre-registered">Fixed before any result was seen.</Popover>API
| Prop | Type | What it does |
|---|---|---|
trigger | ReactNode | Button content. |
title | string | Heading. |
Accessibility
- Dialog semantics with a title and description; Escape closes.
Source
The code is in src/kit/overlays.tsx in runets, MIT licensed.