astro-static-link-preview

A zero-dependency Astro component that turns any URL into a social-style link-preview card entirely at build time. No external libraries, no runtime JavaScript, and no network calls during generation—just compact, tree-shakable HTML + CSS. Choose from six built-in themes (default, small, facebook, x, linkedin, discord) or roll your own with CSS variables.

---

Features

Static rendering	No client-side fetches — perfect for blogs, docs & MDX content.
Six ready-made themes	Recreate the look of Facebook, X (Twitter), LinkedIn, Discord, etc.
Type-safe	Exports an interface for all props.
A zero-dependency and Pure CSS	No external style sheets or JS bundles.

---

install

# choose one
npm i astro-static-link-preview
yarn add astro-static-link-preview
pnpm add astro-static-link-preview

Usage

1. Import

.astro

---
import { LinkPreview } from "astro-static-link-preview";
---

.mdx

import { LinkPreview } from "astro-static-link-preview";

2. Drop in a component

<LinkPreview
  url="https://astro.build"
  title="Astro Homepage"
  description="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."
  image="https://astro.build/og/astro.jpg"
/>

<LinkPreview
  url="https://astro.build"
  title="Astro Homepage"
  description="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."
  image="https://astro.build/og/astro.jpg"
  theme="small"
/>

<LinkPreview
  url="https://astro.build"
  title="Astro Homepage"
  description="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."
  image="https://astro.build/og/astro.jpg"
  theme="facebook"
/>

<LinkPreview
  url="https://astro.build"
  title="Astro Homepage"
  description="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."
  image="https://astro.build/og/astro.jpg"
  theme="x"
/>

<LinkPreview
  url="https://astro.build"
  title="Astro Homepage"
  description="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."
  image="https://astro.build/og/astro.jpg"
  theme="linkedin"
/>

<LinkPreview
  url="https://astro.build"
  title="Astro Homepage"
  description="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."
  image="https://astro.build/og/astro.jpg"
  theme="discord"
/>

API

Prop	Type	Default	Description
url	string (required)	–	Absolute URL to link to.
title	string (required)	""	–
description	string	""	descriptive text (default, facebook, discord).
image	string	null	image / screenshot URL. When omitted, an SVG placeholder(Not Found Image) is shown.
imageAlt	string	""	Alt text for the image.
theme	string	"default"	Card style. (default, small, facebook, x, linkedin, discord)

License

MIT