Og Live Preview

CSS preview of an OG social card.

Preview

npx shadcn@latest add @atroui/og-live-preview

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/og-live-preview

Source lands in your repo. Installation · Registry

Usage

tsx

import { OgLivePreview } from "@/components/blocks/og-live-preview"

<div className="relative aspect-[1200/630]">
  <OgLivePreview title="…" subtitle="…" styleKey="paperQuote" />
</div>

import { OgLivePreview } from "@/components/blocks/og-live-preview"

<div className="relative aspect-[1200/630]">
  <OgLivePreview title="…" subtitle="…" styleKey="paperQuote" />
</div>

API reference

Prop	Type	Default	Description
title	string	-	Card title.
subtitle	string	-	Card subtitle.
styleKey	StyleKey	-	Preset style.

Part of OG and thumbnail images in Next.js.