Qwik UI | Styled Popover Component

WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

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>