Hover Card

A preview that appears while the pointer rests on a link.

Inspect

Installation#

Terminal

npx shadcn@latest add @sphere-kit/hover-card

hover-card.tsx

import {  HoverCard,  HoverCardTrigger,  HoverCardContent,} from "@/components/ui/hover-card"

One rule for using it well. Open one to see it drawn.

Exports HoverCard HoverCardTrigger HoverCardContent. Every part takes its element's usual props and a className.

A preview that appears while the pointer rests on a link.

Inspect

Terminal

npx shadcn@latest add @sphere-kit/hover-card

hover-card.tsx

import {  HoverCard,  HoverCardTrigger,  HoverCardContent,} from "@/components/ui/hover-card"

One rule for using it well. Open one to see it drawn.

Exports HoverCard HoverCardTrigger HoverCardContent. Every part takes its element's usual props and a className.