Introduction

ogimagecn is a shadcn registry of beautiful Open Graph image components. Every component is a plain React component that renders to a real PNG through Satori and the next/og runtime.

Install a component with the shadcn CLI, drop it into an ImageResponse, and you have a polished social card in minutes — fully owned, fully editable code.

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @ogimagecn/simple
Copy

Why these components are different

The components are authored with the Satori-compatible CSS subset — flexbox layouts and inline styles only. That single constraint unlocks something nice: the exact same component renders both as a server-generated PNG and as a live, scaled DOM preview in these docs. What you see in the gallery is what Satori produces.

What You Get

• 🖼️ 7 OG components - Minimal, grid, gradient, blog, changelog, quote, and photo
• ⚡ Built on Satori - Renders with the next/og runtime at the edge
• 👀 Live previews - Faithful, instant DOM previews of every component
• 🎨 Fully customizable - Sensible props with defaults; own the code
• 📦 shadcn compatible - Installs with npx shadcn add
• 📚 Documentation site - Powered by Fumadocs

Tech Stack

• Next.js 16 + App Router (next/og / Satori)
• React 19
• Tailwind CSS 4
• Fumadocs
• shadcn registry

How It Works

1. Each component lives at registry/components/<name>.tsx
2. It is listed in registry.json
3. pnpm registry:build emits installable JSON to public/r

Users then install any component:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @ogimagecn/blog
Copy

…and render it on the server:

Copyimport { ImageResponse } from "next/og";
 
import { Blog } from "@/components/og/blog";
 
export function GET() {
  return new ImageResponse(<Blog title="Hello world" />, {
    width: 1200,
    height: 630,
  });
}

FAQ