Hover Card

A preview card revealed on hover or focus, with a guarded open delay and a 16px-radius surface.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { HoverCardRounded } from '@/components/component-kit/items/hover-card-rounded';
2
3export function Example() {
4  return (
5    <HoverCardRounded trigger={<a href="#" className="underline">@maya</a>}>
6      <p className="text-sm font-medium">Maya Lindqvist</p>
7      <p className="text-sm text-muted-foreground">Design engineer. Ships on Fridays.</p>
8    </HoverCardRounded>
9  );
10}

Props

Hover Card properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that reveals the card.
`openDelay`	`number`	`350`	Delay before the card opens, in milliseconds.
`closeDelay`	`number`	`100`	Delay before the card closes.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { HoverCardRounded } from '@/components/component-kit/items/hover-card-rounded';
2
3export function Example() {
4  return (
5    <HoverCardRounded trigger={<a href="#" className="underline">@maya</a>}>
6      <p className="text-sm font-medium">Maya Lindqvist</p>
7      <p className="text-sm text-muted-foreground">Design engineer. Ships on Fridays.</p>
8    </HoverCardRounded>
9  );
10}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that reveals the card.

openDelay

number

350

Delay before the card opens, in milliseconds.

closeDelay

number

100

Delay before the card closes.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { HoverCardRounded } from '@/components/component-kit/items/hover-card-rounded';
2
3export function Example() {
4  return (
5    <HoverCardRounded trigger={<a href="#" className="underline">@maya</a>}>
6      <p className="text-sm font-medium">Maya Lindqvist</p>
7      <p className="text-sm text-muted-foreground">Design engineer. Ships on Fridays.</p>
8    </HoverCardRounded>
9  );
10}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that reveals the card.

openDelay

number

350

Delay before the card opens, in milliseconds.

closeDelay

number

100

Delay before the card closes.

Hover Card

A preview card revealed on hover or focus, with a guarded open delay and a 16px-radius surface.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { HoverCardRounded } from '@/components/component-kit/items/hover-card-rounded';
2
3export function Example() {
4  return (
5    <HoverCardRounded trigger={<a href="#" className="underline">@maya</a>}>
6      <p className="text-sm font-medium">Maya Lindqvist</p>
7      <p className="text-sm text-muted-foreground">Design engineer. Ships on Fridays.</p>
8    </HoverCardRounded>
9  );
10}

Props

Hover Card properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that reveals the card.
`openDelay`	`number`	`350`	Delay before the card opens, in milliseconds.
`closeDelay`	`number`	`100`	Delay before the card closes.