Yami

Hover Card

Preview content available behind a link.

Installation

Add the hover card component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/hover-card.json

Usage

import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger asChild><Button variant="link">@yami-ui</Button></HoverCardTrigger>
  <HoverCardContent>
    <Avatar><AvatarFallback>SU</AvatarFallback></Avatar>
  </HoverCardContent>
</HoverCard>

Examples

Default

Code

import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger asChild><Button variant="link">@yami-ui</Button></HoverCardTrigger>
  <HoverCardContent>
    <Avatar><AvatarFallback>SU</AvatarFallback></Avatar>
  </HoverCardContent>
</HoverCard>