Hover Card

A preview that opens when a pointer rests on a link — a person, a ticket, a page.

$ pnpm dlx shadcn@latest add https://dashral.com/r/hover-card.json

Assigned to @sofia for review.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/hover-card.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/hover-card

Usage

example.tsx

1import { HoverCard } from "@/components/dashral/hover-card"
2
3<HoverCard trigger={<a href="/team/olivia">@olivia</a>}>
4  <p className="text-sm">Olivia Martin, design lead</p>
5</HoverCard>

Examples

Mentions and tickets

One comment, several previews: people with their status and local time, and a ticket with its progress.

Liam Johnson· 12m

@sofia the new checkout is in ENG-1042. Can you and @budi check the mobile layout before Friday?

Link preview

The page's image, title and site before you follow the link.

We followed the guidance in the ARIA Authoring Practices for every menu, dialog and tab list in the kit.

API reference

HoverCard

Also takes every prop of Radix Hover Card(opens in a new tab).

Prop	Type	Default
`trigger`	`ReactElement` The link it previews. Required.	—
`children`	`ReactNode` The preview.	—
`side / align`	Where it opens.	`"bottom" / "center"`
`openDelay / closeDelay`	`number` Milliseconds before opening and closing.	`300 / 150`
`className`	`string` The panel's classes, e.g. a width.	—

Keyboard

Keys	Action
`Tab`	Focusing the trigger opens it; moving on closes it

Accessibility

For sighted mouse users only: screen readers and touch screens don't get it, so put nothing there that isn't also on the linked page.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.