Install a component
Pick a component from the gallery and add it with the shadcn
CLI. The component is copied into your project at components/og/<name>.tsx.
$ pnpm dlx shadcn@latest add https://ogimagecn.vercel.app/r/simple.json
Render it as an OG image
Create a route handler and return an ImageResponse from next/og. Satori
renders the component to a PNG at request time (or build time, if you make the
route static).
import { ImageResponse } from "next/og";
import { Simple } from "@/components/og/simple";
export function GET(request: Request) {
const { searchParams } = new URL(request.url);
return new ImageResponse(
<Simple
title={searchParams.get("title") ?? undefined}
description={searchParams.get("description") ?? undefined}
/>,
{ width: 1200, height: 630 }
);
}Wire it into your metadata
Point your page's Open Graph metadata at the route:
import type { Metadata } from "next";
export const metadata: Metadata = {
openGraph: {
images: ["/og?title=Hello%20world"],
},
twitter: {
card: "summary_large_image",
images: ["/og?title=Hello%20world"],
},
};Custom fonts (optional)
Satori uses the first font you provide as the default. To ship a custom
typeface, fetch the font and pass it to ImageResponse:
import { ImageResponse } from "next/og";
import { Simple } from "@/components/og/simple";
export async function GET() {
const font = await fetch(
new URL("./Inter-SemiBold.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
return new ImageResponse(<Simple />, {
width: 1200,
height: 630,
fonts: [{ name: "Inter", data: font, weight: 600, style: "normal" }],
});
}Building your own registry
ogimagecn is a normal shadcn registry, so you can extend it:
1. Add a component
Create registry/ogimagecn/yours.tsx. Use flexbox + inline styles only so
it renders in both Satori and the browser.
2. Register it
{
"name": "ogimagecn",
"homepage": "https://ogimagecn.vercel.app",
"items": [
{
"name": "yours",
"type": "registry:component",
"title": "Yours",
"description": "Your custom OG component.",
"files": [
{
"path": "registry/ogimagecn/yours.tsx",
"type": "registry:component",
"target": "components/og/yours.tsx"
}
]
}
]
}3. Build & deploy
pnpm registry:build
pnpm build