React

The main export is intentionally small:

import { EmbedCard } from "embed-card"

<EmbedCard url="https://www.reddit.com/r/github/comments/1j6jga7/i_rebuilt_my_personal_portfolio_using_nextjsits/" />

Optional ctaLabel overrides the default Open original label on link-preview fallbacks only; iframe and Reddit embeds ignore it.

Why start with React?

• The demo app already runs on Next.js
• JSX gives the cleanest install story for App Router users
• The same package can still power non-React apps through other exports

Reddit post URLs render a client-side preview: EmbedCard loads thread metadata from https://www.reddit.com/.../comments/....json in the visitor’s browser and paints a compact Reddit-styled card, which avoids server-side fetches that Reddit often blocks.

Dark mode and next-themes

If the app uses ThemeProvider from next-themes, import ThemedEmbedCard from embed-card/next-themes so embeds follow the same resolved theme as the rest of the layout (this docs site uses the same pattern in the playground preview). Same props as EmbedCard; an explicit theme.appearance still overrides when you need it. See Getting Started (section Match the site theme (next-themes)) and Custom Rendering → Dark mode and appearance.

Runnable examples

Full apps that use EmbedCard live in the repo under examples/next-app and examples/vite-react. See Getting Started for the full table and clone instructions.

With custom providers

import {
  EmbedCard,
  createEmbedProvider,
  defaultProviders,
} from "embed-card"

const spotifyProvider = createEmbedProvider({
  id: "spotify",
  label: "Spotify",
  accentColor: "#1db954",
  match: (url) => url.hostname === "open.spotify.com",
  resolve: (url) => ({
    provider: "spotify",
    providerLabel: "Spotify",
    accentColor: "#1db954",
    title: "Spotify content",
    description: "Custom providers plug into the same card contract.",
    site: url.hostname,
    url: url.toString(),
    displayUrl: url.toString(),
    renderer: {
      type: "link",
      href: url.toString(),
      ctaLabel: "Open on Spotify",
    },
  }),
})

<EmbedCard
  providers={[spotifyProvider, ...defaultProviders]}
  url="https://open.spotify.com/track/7GhIk7Il098yCjg4BQjzvb"
/>