Popover

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Popover, PopoverTrigger, PopoverContent } from "@line/abc-def-react/popover";

<script setup lang="ts">
import { Popover, PopoverTrigger, PopoverContent } from "@line/abc-def-vue/popover";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@line/abc-def-react/popover";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild><Button variant="outline">Token info</Button></PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>--primary</PopoverTitle>
          <PopoverDescription>Used by primary component colors.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@line/abc-def-vue/popover";
</script>

<template>
  <Popover>
    <PopoverTrigger :as-child="true">
      <Button variant="outline">Token info</Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverHeader>
        <PopoverTitle>--primary</PopoverTitle>
        <PopoverDescription>
          Used by primary component colors.
        </PopoverDescription>
      </PopoverHeader>
    </PopoverContent>
  </Popover>
</template>

Component tokens

Composition exports

Usage notes

• Use for small, contextual controls.
• Prefer dialogs for complex forms.
• Related component tokens use the `popover` token group in `@line/abc-def-styles/css`.