A preview of the destination
Where a tooltip names a control, a hover card previews what is behind a link: a profile behind a username, a summary behind a reference. The panel is interactive and stays open while the pointer is inside it. It opens on focus too, so keyboard users get the same preview.
Default
Jane Doe
Product designer
Designs the flows, then argues with the copy until it fits.
Positions
rift-dsReact component library with semantic tokens, light and dark themes, and a chat set.rift-dsReact component library with semantic tokens, light and dark themes, and a chat set.rift-dsReact component library with semantic tokens, light and dark themes, and a chat set.
In running text
The component library ships to npm as rift-dsrift-dsReact component library with semantic tokens, light and dark themes, and a chat set. and the website consumes it like any other package.
No delay
rift-dsReact component library with semantic tokens, light and dark themes, and a chat set.
// From the npm package
import { HoverCard } from 'rift-ds/components/HoverCard/HoverCard';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/hover-card.json