Popover

Installation

npx nuecrea-ui add popover

Usage

import { Button } from '@/components/ui/button';
import * as Popover from '@/components/ui/popover';

function Example({
  label,
  side,
  align,
  arrowPadding,
  disabled,
}: {
  label: string;
  side?: 'top' | 'bottom' | 'left' | 'right';
  align?: 'start' | 'center' | 'end';
  arrowPadding?: number;
  disabled?: boolean;
}) {
  return (
    <Popover.Root>
      <Popover.Trigger
        disabled={disabled}
        render={<Button variant="outline" />}
      >
        {label}
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner
          side={side}
          align={align}
          arrowPadding={arrowPadding}
        >
          <Popover.Popup>
            <Popover.Arrow />
            <Popover.Title>{label}</Popover.Title>
            <Popover.Description>
              You&apos;re all caught up.
            </Popover.Description>
            <div className="mt-3 flex justify-end">
              <Popover.Close render={<Button size="sm" variant="outline" />}>
                Dismiss
              </Popover.Close>
            </div>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

export default function PopoverStory() {
  return (
    <main className="relative h-[520px]">
      {/* Pushed against the left edge with a large arrowPadding: the arrow can't reach the
          trigger centre (data-uncentered). */}
      <div className="absolute top-12 left-0">
        <Example label="Help" arrowPadding={110} />
      </div>
      <div className="absolute top-0 left-[600px]">
        <Example label="Archived" disabled />
      </div>
      {/* Near the left edge: the popup shifts and the arrow is uncentered. */}
      <div className="absolute top-0 left-0">
        <Example label="Notifications" />
      </div>
      <div className="absolute top-40 left-60">
        <Example label="Share" side="right" align="start" />
      </div>
      {/* Near the bottom edge: side="bottom" flips to top. */}
      <div className="absolute bottom-0 left-60">
        <Example label="Filters" />
      </div>
      {/* Room to scroll a trigger out of view (data-anchor-hidden). */}
      <div aria-hidden="true" className="absolute top-full h-[600px] w-px" />
    </main>
  );
}

API reference