BJORK Link preview card

Component

About

Link preview card is a production-ready cards component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Link preview card to your project and fits it to your theme.

Code

How BJORK Link preview card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { LINK_PREVIEW_SAMPLE, LinkPreviewCard, type LinkMeta } from "@/components/ui/bjork-link-preview-card";

const COMPACT: LinkMeta = {
  title: "Tidewater 2.4 — offline sync and a faster command bar",
  description: "Release notes for the October update.",
  siteName: "Tidewater",
  themeColor: "#2f6f5e",
};

const resolveSample = (url: string) =>
  new Promise<LinkMeta>((resolve, reject) =>
    setTimeout(() => (url.includes("broken") ? reject(new Error("unreachable")) : resolve(LINK_PREVIEW_SAMPLE.meta)), 1200),
  );
function SourceDemo(){
const isPreview = false;
const [shown, setShown] = useState(true);
const reset = () => setShown(true);
return <>

      {isPreview ? (
        <LinkPreviewCard meta={LINK_PREVIEW_SAMPLE.meta} />
      ) : (
        <div className="flex w-full max-w-[420px] flex-col gap-4">
          {shown ? <LinkPreviewCard resolve={resolveSample} onDismiss={() => setShown(false)} /> : null}
          <LinkPreviewCard url="https://tidewater.app/changelog/2-4" meta={COMPACT} layout="compact" />
          <LinkPreviewCard url="https://broken.example.org/post/481" resolve={resolveSample} layout="compact" />
        </div>
      )}
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}