Popover

Displays rich content in a portal, triggered by a button.

import { Button } from "@smartacteam/ambient-web/button";
import { Popover } from "@smartacteam/ambient-web/popover";

export function PopoverDemo() {
  return (
    <Popover.Root>
      <Popover.Trigger render={<Button>Open popover</Button>} />
      <Popover.Content className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-sm text-foreground-secondary">
              Set the dimensions for the layer.
            </p>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  );
}

Usage

import { Popover } from "@smartacteam/ambient-web/popover";

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content>Place content for the popover here.</Popover.Content>
</Popover.Root>