Popover

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download popover -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Popover } from "@/components/ui/popover";
import { PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { PopoverContent } from "@/components/ui/popover";
import { reactive } from "vue";
import * as UI from "@/components/ui/popover";

const Component = UI.Popover;

const args = reactive(
  {
    "open": false,
    "side": "bottom",
    "text": "Popover content",
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown> & { side?: "top" | "right" | "bottom" | "left" },
);
</script>

<template>
  <Popover v-model:open="args.open"
    ><PopoverTrigger as-child><Button>Open popover</Button></PopoverTrigger
    ><PopoverContent :side="args.side">{{ args.text }}</PopoverContent></Popover
  >
</template>

Examples

Default

<script setup lang="ts">
import { Popover } from "@/components/ui/popover";
import { PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { PopoverContent } from "@/components/ui/popover";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import * as UI from "@/components/ui/popover";

const Component = UI.Popover;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Popover v-bind="args"
    ><PopoverTrigger as-child
      ><Button variant="tertiary">Open popover</Button></PopoverTrigger
    ><PopoverContent class="w-80"
      ><div class="grid gap-4">
        <div class="space-y-2">
          <h4 class="font-medium leading-none">Dimensions</h4>
          <p class="text-sm text-neutral-mid">
            Set the dimensions for the layer.
          </p>
        </div>
        <div class="grid gap-2">
          <div class="grid grid-cols-3 items-center gap-4">
            <Label html-for="width">Width</Label
            ><Input id="width" default-value="100%" class="col-span-2 h-8" />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label html-for="maxWidth">Max. width</Label
            ><Input
              id="maxWidth"
              default-value="300px"
              class="col-span-2 h-8"
            />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label html-for="height">Height</Label
            ><Input id="height" default-value="25px" class="col-span-2 h-8" />
          </div>
        </div></div></PopoverContent
  ></Popover>
</template>

Simple Content

<script setup lang="ts">
import { Popover } from "@/components/ui/popover";
import { PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { PopoverContent } from "@/components/ui/popover";
import * as UI from "@/components/ui/popover";

const Component = UI.Popover;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Popover
    ><PopoverTrigger as-child
      ><Button variant="tertiary">Open popover</Button></PopoverTrigger
    ><PopoverContent class="w-80"
      ><div class="space-y-2">
        <h4 class="font-medium leading-none">About</h4>
        <p class="text-sm text-neutral-mid">
          Popovers display rich content in a portal, anchored to a trigger
          element.
        </p>
      </div></PopoverContent
    ></Popover
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

PopoverContent

PopoverDescription

PopoverHeader

PopoverTitle

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.