Overlays & Tooltips

Link Preview

Hover a URL to unfurl title, description, and thumbnail.

Import

tsx

import { LinkPreview } from "@cronus-ui/ui";

bash

npx cronus-ui add link-preview

Examples

Unfurl

Hover a link to fetch title, description, and a thumbnail. Metadata comes from `endpoint` (microlink.io by default) or an injected `fetcher`.

Check out the Cronus UI repository to browse the catalog.

tsx

<p className="max-w-prose text-fg-secondary">
  Check out the{" "}
  <LinkPreview href="https://github.com/pedrogbraz/cronus-ui">
    Cronus UI repository
  </LinkPreview>{" "}
  to browse the catalog.
</p>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

LinkPreviewLabels

Prop	Type	Default	Description
`invalidUrl`*	`string`	—	—
`failed`*	`string`	—	—
`unavailable`*	`string`	—	—
`preview`*	`string`	—	—
`favicon`*	`string`	—	—

LinkPreviewProps

Prop	Type	Default	Description
`href`*	`string`	—	—
`children`*	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`endpoint`	`string`	`"https://api.microlink.io"`	Endpoint that returns URL metadata as JSON. Receives the target URL as a `url` query param and must return microlink.io shape (`{ title, description, image, logo, publisher }` or `{ data: … }`).
`fetcher`	`(href: string, endpoint: string) => Promise<LinkPreviewMetadata>`	`fetchLinkPreviewMetadata`	—
`labels`	`Partial<LinkPreviewLabels>`	—	Override default English strings.