GitHubGitHub
← All components
Overlays / component

Popover

A caller-controlled anchored panel for compact menus and settings.

ClosedOpen
<Popover bind:open label="Open settings">...</Popover>

Installation

pnpm add @chanrg/4ui

Import the stylesheet once, at the root of your app:

import '@chanrg/4ui/styles.css';

Usage

import { Popover } from '@chanrg/4ui';<Popover bind:open label="Open settings">...</Popover>

API reference

Props

PropTypeDefaultDescription
openbooleanfalseBindable visibility.
labelstringOpen menuTrigger label.

CSS variables

VariableDescription
--4ui-surfacePrimary component surface.
--4ui-textPrimary foreground color.
--4ui-borderDefault control and panel border.

Accessibility

  • Trigger exposes expanded state.

Dependencies

No runtime component dependencies.