02 — COMPONENTS
Hover Card
Context preview component for case links, service descriptions, and stack references. Built from shadcn/ui and adapted to the Chuv Studio foundation, keeping section internals straight-edged and card-based.
Use Cases
Compact triggers that reveal extra context without leaving the current section
<HoverCard>
<HoverCardTrigger href="#">View case preview</HoverCardTrigger>
<HoverCardContent className="w-[min(30rem,calc(100vw-2rem))] p-0">
<PreviewPanel tone="case" />
</HoverCardContent>
</HoverCard><HoverCardTrigger href="#">Open service scope</HoverCardTrigger>
Studio Contexts
Patterns that make sense for a design and tech studio workflow
<HoverCardContent className="w-[min(28rem,calc(100vw-2rem))] p-0"> <PreviewPanel tone="tool" /> </HoverCardContent>
Placements
The popup can be positioned based on layout density and surrounding content
<HoverCardContent side="top" align="start"> ... </HoverCardContent>
<HoverCardContent side="right" align="center"> ... </HoverCardContent>
<HoverCardContent side="bottom" align="end"> ... </HoverCardContent>
Interactive Demo
Adjust the preview type, popup position, and light or dark visual treatment
Preview Type
Side
Align
Preview Tone
Usage
Import, key props, and accessibility behavior
Import
import {
HoverCard,
HoverCardTrigger,
HoverCardContent,
} from "@/components/ui/hover-card"side
"top" | "right" | "bottom" | "left"
Default handled by the component. Controls where the preview appears.
align
"start" | "center" | "end"
Default is "center". Useful when the trigger sits close to an edge.
sideOffset
number
Distance between trigger and popup. Good for denser layouts.
delay
number
Open delay on the trigger. Helpful when the interface has many hover points.
Accessibility Notes
Hover Card also responds to focus, which helps keyboard users inspect the same contextual information. Keep the trigger copy explicit, avoid critical-only hover content, and make sure the destination still works without opening the preview first.