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 render={<Button variant="noShadow" />}>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Examples

Default

Basic

Use delay and closeDelay on the trigger to control when the card opens and closes. HoverCardTrigger renders a link by default.

Sides

Use the side prop on HoverCardContent to control which side of the trigger the card appears on.