Pricing Open Graph Image Template
A pricing card with three plan tiles and a highlighted middle plan.
A pricing card with three plan tiles and a highlighted middle plan.
Search blocks by description or jump to a page.
Every OG image is included with Pro and Team. Start a plan to copy the code, install with the CLI, and download the raw SVG.
Already on a plan? Log in
Use the Pricing template when the share should make the whole plan structure legible at a glance. It leads with a short title, then lines up three miniature plan tiles, each with a name, a price, and a one line note, with the recommended plan inverted to dark and raised above the others so the eye lands on it first.
This template is a metadata image route for the Next.js App Router. The file exports size, contentType, and alt values plus a default async function that returns an ImageResponse. When the pricing page is shared, satori converts the JSX into an SVG document, the runtime rasterizes that SVG into a 1200 by 630 PNG, and Next.js serves the result and wires the og:image and twitter:image tags into the page head automatically. The tiles read straight from your plan list, so a price change on the page shows up on the card too.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-pricing-plans
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a pricing page, move it into that route instead, for example app/pricing/opengraph-image.tsx. You can also copy the code from this page straight into your project.
The card renders text with Inter, read from assets/fonts at your project root with node:fs so the font files never ship to the browser. Download the latin woff files for weights 400, 500, 600, and 700 from Fontsource and save them as assets/fonts/inter-latin-400-normal.woff and so on.
The content object holds the brand, the title, the url, and a plans array. Each plan carries a name, a price string, a short note, and a featured flag; the featured plan renders inverted on a dark tile and stands taller than the rest. Three plans divide the row evenly and read best; four starts to squeeze the prices, which render at 52 pixels. Keep each note to a few words so it holds one line, and set featured on exactly one plan.
satori supports a focused subset of CSS: flexbox layout only, flat colors, and an explicit display: flex on any element with multiple children. Keep those rules in mind if you rework the layout.