Hover card - Pharen

Use Hover card to show contextual content or user feedback. This page covers every Vue component exported by the public module.

View code

<script setup lang="ts">
import { Avatar, AvatarFallback, Button, HoverCard, HoverCardContent, HoverCardTrigger } from '@pharen/ui';
</script>

<template>
  <HoverCard>
    <HoverCardTrigger as-child><Button variant="link">@pharen</Button></HoverCardTrigger>
    <HoverCardContent class="w-72">
      <div class="flex gap-3">
        <Avatar><AvatarFallback>PH</AvatarFallback></Avatar>
        <div class="space-y-1"><p class="text-sm font-semibold">Pharen</p><p class="text-sm text-muted-foreground">AI-native workspace for workflows and agents.</p></div>
      </div>
    </HoverCardContent>
  </HoverCard>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@pharen/ui';

Exports

Export	Purpose
`HoverCard`	Exported Vue component from this module.
`HoverCardTrigger`	Opens or activates the component.
`HoverCardContent`	Contains the visible content.

Source

Open the source on GitHub