Hover Card

For sighted users to preview content available behind a link.

shadcn/ui docs

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/hover-card.json

Usage

import { Button } from '@/components/ui/button'
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card'
<HoverCard>
  <HoverCardTrigger asChild>
    <Button example="noShadow">Hover</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>