Getting Started

Install the package, render your first card, and understand the workspace layout.

Getting Started

Install the package

pnpm add embed-card

React usage

import { EmbedCard } from "embed-card"

export function ArticleEmbed() {
  return (
    <EmbedCard url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
  )
}

Theme the card

import { EmbedCard } from "embed-card"

export function BrandedArticleEmbed() {
  return (
    <EmbedCard
      url="https://vimeo.com/76979871"
      theme={{
        accentColor: "#e11d48",
        radius: 28,
        shadow: "0 28px 100px rgba(225, 29, 72, 0.18)",
      }}
    />
  )
}

Repo layout

apps/
  web/   -> docs site + interactive playground
packages/
  embed-card/ -> publishable library
  ui/         -> shared shadcn/ui components
examples/     -> copy-paste snippets for frameworks

Overview

Start with the package shape, the monorepo layout, and the supported providers.

Provider Registry

Extend the package with custom matchers and renderers instead of forking it.

On this page

Getting Started Install the package React usage Theme the card Repo layout