Hover Card

Imports

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

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@line/abc-def-react/hover-card";

<script setup lang="ts">
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@line/abc-def-vue/hover-card";
</script>

Shadcn references

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

Basic usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@line/abc-def-react/hover-card";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild><Button variant="link">Preview token</Button></HoverCardTrigger>
      <HoverCardContent>--button-bg-primary resolves to --primary.</HoverCardContent>
    </HoverCard>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@line/abc-def-vue/hover-card";
</script>

<template>
  <HoverCard>
    <HoverCardTrigger :as-child="true">
      <Button variant="link">Preview token</Button>
    </HoverCardTrigger>
    <HoverCardContent>
      --button-bg-primary resolves to --primary.
    </HoverCardContent>
  </HoverCard>
</template>

Component tokens

Composition exports

Usage notes

• Do not put required actions only inside hover cards.
• Keep preview content short.
• Related component tokens use the `hover-card` token group in `@line/abc-def-styles/css`.