Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn inline code element for a function or type that shows its signature, a one-line description and a reference link in a hover card on hover or focus.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this in documentation, blog posts and tutorials that mention APIs inline and should not send readers away for a signature.
Do not use it in code blocks (use editor tooling) or for long explanations; link to the reference.
It builds on hover-card, which the CLI installs for you.
import { HoverCardCodeSymbol } from "@/components/hover-card-code-symbol"<HoverCardCodeSymbol
name="useDeferredValue"
doc={{
signature: "useDeferredValue<T>(value: T): T",
description: "Returns a lagging copy of the value.",
href: "/reference/use-deferred-value",
}}
/>| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | The symbol as written. |
doc | { signature, description, href? } | - | What the card shows. |
openDelay | number | 250 | Milliseconds before opening. |
<code> element, so keyboard users can open the signature.pre block so it scrolls instead of wrapping; the reference link is a normal link in the card.| Key | Action |
|---|---|
| Tab | focuses the symbol and opens the card |
| Escape | closes the card |
The pattern ships a Testing Library test (hover-card-code-symbol.test.tsx) that covers the focusable code element, hover content with the reference link and keyboard focus.