Coming soon Open Graph Image Template
A dark centered teaser card with a brand mark, headline, and date chip.
A dark centered teaser card with a brand mark, headline, and date chip.
Search blocks by description or jump to a page.
Every Open Graph image template is included with Basic and Pro. Pick a plan to copy the code, install with the CLI, and download the raw SVG.
Already purchased? Log in
Use the Coming soon template for a teaser that gives nothing away. It centers the brand mark over a single line of intrigue, a date chip, and the url, and stops there. On a dark card the restraint does the work, so the share reads as deliberate rather than unfinished.
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 a page in the segment 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. Everything centers in a single column, so the card stays balanced no matter how short the copy is.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-coming-soon
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. To scope it to the teaser, move it into that route segment, for example app/soon/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 just four fields: the brand letter shown in the large rounded mark, the title, the date chip, and the url. Keep the title to one short line so the centered column stays tight; the layout is spaced with fixed margins rather than a gap, so a much longer title would unbalance it. Swap the date for a season or a simple soon if you would rather not commit to a day. The brand mark takes a single character, so use your initial or a short logotype in its place.
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.