Hover card

For sighted users to preview content available behind a link.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/hover-card

Lineage

Spoke

Anatomy

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

export default () => (
	<HoverCard>
		<HoverCardTrigger />
		<HoverCardContent />
	</HoverCard>
)

Spoke utility classes

Class	Fallback chain	Description
`--hover-card-content`	`var(--popover)`	Colour for card content hover variant
`--hover-card-content-foreground`	`var(--popover-foreground)`	Text/icon colour for card content hover variant
`--hover-card-border`	`var(--border)`	Border colour for card hover variant
`--hover-card-radius`	`var(--radius-md)`	Border radius for card
`--shadow-hover-card`	`var(--shadow-md)`	Box shadow for hover card