Popover

kai-popover

A trigger that toggles a floating card of arbitrary content — a model menu, a settings panel, an account dropdown. The panel is a role="dialog" region, not a menu, so it holds anything: rows, toggles, nested groups. Click a position around the trigger below to see each placement.

• Shadow DOM
• 1 event
• Slotted trigger + panel
• Escape / outside-click close
• 12 placements

Preview

When to use

Reach for <kai-popover> for a “button + card” affordance — a header model menu, a settings popover, an account dropdown with mixed controls. For a flat list of commands, a menu is simpler. In SolidJS, the Popover primitive does the same without the web-component wrapper.

Usage

Slot the control as slot="trigger" and the panel as the default slot:

<kai-popover placement="bottom-start">
  <button slot="trigger">GPT-5.5 ▾</button>

  <div>
    <button>GPT-5.5 — Flagship model</button>
    <button>Legacy models ▾</button>
    <label>Temporary chat <kai-switch label="Temporary chat"></kai-switch></label>
  </div>
</kai-popover>

<script type="module">
  import '@kitn.ai/ui/elements';

  document.querySelector('kai-popover')
    .addEventListener('kai-open-change', (e) => console.log('open:', e.detail.open));
</script>

• Slots — trigger is the control; the default slot is the panel. Clicking the trigger toggles it.
• Dismissal — Escape or a click outside closes the panel; clicks inside it do not.
• placement — floating placement relative to the trigger (bottom-start, top, right, …); defaults to bottom-start. The panel flips and shifts to stay on screen.
• Controlled — omit open for click-to-toggle, or set the open property and drive it from kai-open-change to control it yourself.
• Panel content lives in your light DOM, so your own styles apply to it directly — no shadow piercing. Font size, spacing, icons are all yours: style the slotted content however you like (the panel defaults to a compact text-sm and inherits from there). Use your own icon library for chevrons and row icons.

Props

Property	Type	Default	Notes
placement	"top" | "right" | "bottom" | "left" | "top-start" …	'bottom-start'	Floating placement relative to the trigger (floating-ui placement).
gutter	number	6	Gap in px between the trigger and the panel.
open	boolean	—	Controlled open state. Set as a JS property (`el.open = true`) to drive the popover from your app; omit for the default click-to-toggle behaviour.

Events

Event	Detail	Notes
kai-open-change	{ … }	The popover wants to open or close (click, Escape, or outside-click).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Popover

---

Need a hand? Report a bug Ask for help