Hover Card

For sighted users to preview content behind a link.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/hover-card.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Usage

How to use this component in your code.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>