Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

LinkPreview

A link enriched with what the destination is.

CoreMedia & Previews@gaudi/design-system/core/LinkPreviewView in StorybookSource

One normaliser, normalizeLinkPreview, turns the app's preview payload into a kind (repository, video, article, social post, docs, Wikipedia, package, image, file, internal post or website) and the rich fields that kind earns; three variants present it.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import LinkPreview from '@gaudi/design-system/core/LinkPreview';

Usage

import { LinkPreview, SiteConfigProvider } from '@gaudi/design-system';
// Inline: the link text reveals a rich card on hover or focus.<><p>The source is in <LinkPreview url='https://github.com/ahmadassaf/design-system' title='Gaudi on GitHub' />.</p>
{/* Card and compact row; previewData skips fetching (server-rendered or cached metadata). */}<LinkPreview url='https://www.youtube.com/watch?v=qh3NGpYRG3I' variant='card' previewData={{ title: 'Designing with tokens', image: '/og/tokens.jpg', author: 'Gaudi', duration: 'PT12M41S' }} /><LinkPreview url='https://medium.com/@ahmadassaf/knowledge-graphs' variant='compact' />
{/* The app owns the endpoint that fetches metadata and any derived images; Gaudi loads nothing by default. */}<SiteConfigProvider preview={{ endpoint: '/api/preview', resolveImage: { video: '/thumbs/{videoId}.jpg' } }}>{children}</SiteConfigProvider></>

Examples

Playground

Storybook
Storybook

States

Storybook

API

15 props

Accessibility

Every variant is a real link with a readable name; the hover card opens on focus too and only adds detail. Unavailable links (400, 404, 410) say so in their accessible name, and stats are read as "1.3K stars", not bare numbers.

Notes

  • The app owns fetching: Gaudi only calls an endpoint the app configures, never third-party pages, and derives no image URLs itself.
  • usePreviewData caches responses (LRU, one hour; failures for a minute) and deduplicates concurrent requests.
LinkLink centralizes navigation semantics for internal, anchor, and external links.CardCard frames reusable content with title, subtitle, and optional children.8 examplesImageImage renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.