Hewn
Components

Components

Popover

Anchored content panel for short explanations without a modal layer.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add popover

DialogTrigger + Popover pattern for lightweight overlays. Heavier confirmations still belong in Dialog.

Usage

TSX
import {
  Button,
  Popover,
  PopoverBody,
  PopoverTitle,
  PopoverTrigger,
} from "@hewnui/ui";

<PopoverTrigger>
  <Button>Details</Button>
  <Popover>
    <PopoverTitle>Latency</PopoverTitle>
    <PopoverBody>Median response is 47.2ms.</PopoverBody>
  </Popover>
</PopoverTrigger>

Accessibility

  • Opens as a dialog for focus management
  • Esc and outside click dismiss
  • Title uses the dialog heading slot

API reference

Props for Popover from @hewnui/ui/popover. Generated from component types — not hand-written.

Prop

Type

Drawer

Side panel overlay for filters and dense tools.

Tooltip

Short contextual hint anchored to a trigger on hover or focus.

On this page

UsageAccessibility