Who
From @noordNoord ships Vlak. Door: vlak.dev..
Hover card
Previews linked context on hover or keyboard focus.
Preview
@noordNoord, a venture studio in Alkmaar. Ten portfolio companies, one design system.
In action
When to use
Use it for
- A preview of the thing a link points at: a profile, a document, a place.
- Rich content that is not needed to use the link.
Not for
- One-line labels; use Tooltip.
- Content with its own controls; use Popover.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { HoverCard, Link } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/hover-card.
2. Vendor the source
npx @noorddev/vlak-cli add hover-card
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/hover-card.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { HoverCard, Link } from "@noorddev/vlak-react";
<HoverCard trigger={<Link href="/noord">@noord</Link>}>
Noord, a venture studio in Alkmaar. Ten portfolio companies, one design system.
</HoverCard>Props
HoverCard
Preview panel on hover or keyboard focus. CSS shows it; the panel describes the trigger, and Escape hides it until the pointer leaves.
| Prop | Type | Default | Description |
|---|---|---|---|
triggerrequired | ReactNode | A focusable element is used as is; anything else gets one tab stop. | |
open | boolean | Keep the panel shown regardless of hover or focus: for docs, tests, and static previews. |
Also accepts HTMLAttributes<HTMLSpanElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the trigger and shows the card |
| Escape | Hides the card until the pointer leaves |
Accessibility
- The panel is role="tooltip" and describes the trigger through aria-describedby.
- A focusable trigger element is used as is; anything else is wrapped in a tab stop.
Markup
<span class="rs-hover-card"><span tabindex="0" aria-describedby="noord-card">@noord</span><span class="rs-hover-card-panel" role="tooltip" id="noord-card">Noord, a venture studio in Alkmaar. Ten portfolio companies, one design system.</span></span>
Classes
.rs-hover-card.rs-hover-card-panel.rs-hover-card-open