Components

Components

Popover

Anchored content panel for short explanations without a modal layer.

newfree

pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

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

Usage

Snippet

import {
  Button,
  Popover,
  PopoverBody,
  PopoverTitle,
  PopoverTrigger,
} from "@komponents/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

Drawer

Side panel overlay for filters and dense tools.

Tooltip

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

On this page

Usage Accessibility