Introduction
Copy-paste Open Graph image components for React. Built on Satori, works with the shadcn CLI.
ogimagecn provides beautifully designed, customizable Open Graph image components. Built on Satori, and designed to work seamlessly with the shadcn CLI.
Install a block — a ready-made Open Graph image — with the shadcn CLI, drop
it into an ImageResponse, and you have a polished social card in minutes —
fully owned, fully editable code. Blocks are composed from a small set of
Satori-safe components (avatar, badge, brand mark, grid lines) that you can
also use to build your own.
Philosophy
ogimagecn follows the shadcn model for social images: copy-paste components you can own, with zero lock-in and sensible defaults that work immediately.
Open Graph images are often treated as an afterthought — a one-off template hand-tuned until Satori stops complaining, then never touched again. ogimagecn takes a different approach. Every component is written in the Satori-compatible subset of CSS, flexbox and inline styles only, so the same code renders as a PNG on the server and as a live DOM preview in the browser. What you see in the gallery is what Satori produces.
The goal is simple: make social cards feel like the rest of your stack — composable, typed, and easy to customize.
Why ogimagecn?
Most OG image setups are either a single hard-coded template or a hosted service you do not control. ogimagecn is built for teams that want polished cards without giving up the code:
- Own Your Code: Copy the components into your project and customize everything.
- Start Fast: Run one command, return an
ImageResponse, and ship your first card. - Check Before You Share: Use Scan to see how your card lands on each platform before you post the link.