Link Preview

A rich URL bookmark preview card that displays fetched OpenGraph metadata including page titles, descriptions, domain hostnames, and hero thumbnails. Includes built-in loading skeletons and error fallbacks.

import { LinkPreview } from '@nofinite/nui';

Interactive Preview

Key Features

• Rich OpenGraph Presentation: Visual cards that elevate standard hyperlinks into rich media bookmarks.
• Loading Skeleton State: Clean shimmer animations while asynchronous URL metadata resolves.
• Graceful Error Handling: Automatically renders a safe fallback anchor if metadata extraction fails.
• Accessible Anchor Semantics: Preserves standard keyboard navigation and screen reader link announcements.

Usage

Basic Usage

import { LinkPreview } from '@nofinite/nui';

export default function BookmarkExample() {
  return (
    <LinkPreview
      url="https://github.com/NofiniteHQ/stack"
      title="Nofinite Stack — Component Primitives & Tooling"
      description="A high-velocity monorepo featuring NUI accessible components, Nuicss utility engine, and developer toolkits."
      image="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=600&q=80"
    />
  );
}

Loading State

<LinkPreview
  url="https://example.com/pending-article"
  loading={true}
/>

Best Practices

Do

• Use LinkPreview in rich text feeds, documentation footnotes, and chat messengers to give users visual context before clicking external links.
• Cache OpenGraph server responses to avoid repeated scraping of external URLs.

Don't

• Do not use LinkPreview as a substitute for inline navigation menus or dense breadcrumbs.

API Reference