Qwik UI | Styled Popover Component

A non-modal primitive with overlays that open and close around a DOM element.

import { component$ } from '@builder.io/qwik';
import { Input, Label, Popover, buttonVariants } from '~/components/ui';

export default component$(() => {
  return (
    <Popover.Root flip={false} gutter={8}>
      <Popover.Trigger class={buttonVariants({ look: 'outline' })}>
        Open popover.
      </Popover.Trigger>
      <Popover.Panel>
        <div class="grid gap-4">
          <div class="space-y-2">
            <h4 class="font-medium leading-none">Dimensions</h4>
            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
          </div>
          <div class="grid gap-2">
            <div class="grid grid-cols-5 items-center gap-4">
              <Label class="col-span-2" for="width">
                Width
              </Label>
              <Input name="width" value="100%" class="col-span-3 h-8" />
            </div>
            <div class="grid grid-cols-5 items-center gap-4">
              <Label class="col-span-2" for="maxWidth">
                Max. width
              </Label>
              <Input name="maxWidth" value="300px" class="col-span-3 h-8" />
            </div>
            <div class="grid grid-cols-5 items-center gap-4">
              <Label class="col-span-2" for="height">
                Height
              </Label>
              <Input name="height" value="25px" class="col-span-3 h-8" />
            </div>
            <div class="grid grid-cols-5 items-center gap-4">
              <Label class="col-span-2" for="maxHeight">
                Max. height
              </Label>
              <Input name="maxHeight" value="none" class="col-span-3 h-8" />
            </div>
          </div>
        </div>
      </Popover.Panel>
    </Popover.Root>
  );
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add popover

import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
import { Popover as HeadlessPopover } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';
 
const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) => {
  return (
    <HeadlessPopover.Root {...props}>
      <Slot />
    </HeadlessPopover.Root>
  );
});
 
const Trigger = HeadlessPopover.Trigger;
 
const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
  return (
    <HeadlessPopover.Panel
      {...props}
      class={cn(
        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
        'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[open]:zoom-in-95',
        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        props.class,
      )}
    >
      <Slot />
    </HeadlessPopover.Panel>
  );
});
 
export const Popover = {
  Root,
  Trigger,
  Panel,
};

Usage

import { Popover } from '~/components/ui';

<Popover.Root>
  <Popover.Trigger>Open Trigger</Popover.Trigger>
  <Popover.Panel>Place your content here.</Popover.Panel>
</Popover.Root>