Popover

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

A floating panel of arbitrary content, built on Headless UI's Popover. It closes on Escape, an outside click, or a CloseButton inside it:

import { CloseButton, Popover, PopoverButton, PopoverPanel } from '@vinui/react';

<Popover>
  <PopoverButton>Share</PopoverButton>
  <PopoverPanel anchor="bottom start">
    <p>Anyone with the link can view it.</p>
    <CloseButton size="sm">Copy link</CloseButton>
  </PopoverPanel>
</Popover>;

• PopoverButton takes the same props as Button and defaults to variant="secondary".
• PopoverPanel opens at anchor="bottom" by default; pass focus to move focus into it when it opens.
• Wrap related popovers (e.g. a navigation bar) in PopoverGroup.

CloseButton is a Button that closes the Popover or Dialog it's inside, without wiring up state.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.