astro-static-link-preview is an Astro component that generates social media-style link preview cards.
It creates these previews entirely at build time. This means there are no external library dependencies, no runtime JavaScript, and no network calls when a user loads your page.
Features
🎨 Six pre-built themes – default, small, Facebook, X, LinkedIn, Discord
📦 Zero dependencies – Pure CSS and HTML output with no external libraries
âš¡ Tree-shakable – Compact bundle size with only the code you need
🔧 TypeScript support – Full type safety with exported interfaces
🎯 Customizable – Override styles with CSS variables or create custom themes
📱 Responsive design – Cards adapt to different screen sizes automatically
Use Cases
- Blog posts and articles – Add rich previews for external links in your content
- Documentation sites – Create visual references to related tools and resources
- Portfolio projects – Showcase links to live demos, repositories, or case studies
- MDX content – Enhance Markdown content with interactive link previews
- Resource directories – Build curated lists of tools with visual previews
How To Use It
1. Install and import the astro-static-link-preview component into your Astro project.
# Yarn
$ yarn add astro-static-link-preview
# NPM
$ npm install astro-static-link-preview
# PNPM
$ pnpm install astro-static-link-preview
import { LinkPreview } from "astro-static-link-preview";2. Add a basic link preview with the required url, title, description, and image props.
<LinkPreview
url="https://next.jqueryscript.net"
title="NextGen JS"
description="Explore The Latest Web Dev Trends."
image="https://next.jqueryscript.net/preview.jpg"
imageAlt="NextGen JS"
/>3. Choose from six available themes:
<!-- Default theme -->
<LinkPreview url="..." title="..." theme="default" />
<!-- Compact small theme -->
<LinkPreview url="..." title="..." theme="small" />
<!-- Facebook-style theme -->
<LinkPreview url="..." title="..." theme="facebook" />
<!-- X (Twitter) theme -->
<LinkPreview url="..." title="..." theme="x" />
<!-- LinkedIn theme -->
<LinkPreview url="..." title="..." theme="linkedin" />
<!-- Discord theme -->
<LinkPreview url="..." title="..." theme="discord" />
Related Resources
- Astro – The web framework this component is built for
- MDX – Markdown format that supports JSX components
- Open Graph Protocol – Standard for rich social media previews
- Twitter Cards – Twitter’s link preview specification
FAQs
Q: Do I need to fetch metadata manually for each link?
A: Yes, you need to provide the title, description, and image URL as props. The component focuses on rendering rather than fetching metadata.
Q: Can I customize the appearance beyond the built-in themes?
A: Yes, you can override styles using CSS variables or create entirely custom themes by targeting the component’s CSS classes.
Q: Does this work with static site generation?
A: Absolutely. The component is designed specifically for static generation and produces no runtime JavaScript.
Q: Are the preview cards accessible?
A: Yes, the component includes proper semantic HTML and alt text support for screen readers.
