Popover

Basic usage

Basic usage — see the example below.

tsx

import { Popover } from "~/components/ui/base/popover";

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Panel>
    <div class="space-y-2 p-4">
      <p class="text-callout font-medium text-label">Popover content</p>
      <p class="text-caption-1 text-secondary-label">
        An inner block with padding — the panel host in floating mode may have its padding reset by headless CSS.
      </p>
    </div>
  </Popover.Panel>
</Popover.Root>

Placement (floating)

The floating prop on the root passes the Floating UI placement (e.g. "top" , "bottom-end" ).

tsx

import { Popover } from "~/components/ui/base/popover";

<Popover.Root floating="top">
  <Popover.Trigger>Up</Popover.Trigger>
  <Popover.Panel>
    <div class="p-4 text-callout text-secondary-label">Panel above the trigger.</div>
  </Popover.Panel>
</Popover.Root>

Arrow

Set arrow on Popover.Root and insert Popover.PanelArrow into the panel.

tsx

import { Popover } from "~/components/ui/base/popover";

<Popover.Root gutter={8} arrow floating="left">
  <Popover.Trigger>With arrow</Popover.Trigger>
  <Popover.Panel>
    <Popover.PanelArrow />
    <div class="p-4 text-callout text-secondary-label">
      The root has an <code>arrow</code> prop for the Floating UI middleware.
    </div>
  </Popover.Panel>
</Popover.Root>

<Popover.Root gutter={8} arrow  floating="top">
  <Popover.Trigger>With arrow</Popover.Trigger>
  <Popover.Panel>
    <Popover.PanelArrow />
    <div class="p-4 text-callout text-secondary-label">
      The root has an <code>arrow</code> prop for the Floating UI middleware.
    </div>
  </Popover.Panel>
</Popover.Root>

<Popover.Root gutter={8} arrow  floating="bottom">
  <Popover.Trigger>With arrow</Popover.Trigger>
  <Popover.Panel>
    <Popover.PanelArrow />
    <div class="p-4 text-callout text-secondary-label">
      The root has an <code>arrow</code> prop for the Floating UI middleware.
    </div>
  </Popover.Panel>
</Popover.Root>

<Popover.Root gutter={8} arrow  floating="right">
  <Popover.Trigger>With arrow</Popover.Trigger>
  <Popover.Panel>
    <Popover.PanelArrow />
    <div class="p-4 text-callout text-secondary-label">
      The root has an <code>arrow</code> prop for the Floating UI middleware.
    </div>
  </Popover.Panel>
</Popover.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/popover/meta.generated.json not found or path not allowed.