# Introduction

ogimagecn is a shadcn registry of beautiful Open Graph image components built on Satori.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



**ogimagecn** is a [shadcn registry](https://ui.shadcn.com/docs/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`](https://nextjs.org/docs/app/api-reference/functions/image-response)
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.

```bash
npx shadcn@latest add https://ogimagecn.vercel.app/r/simple.json
```

## Why these components are different [#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 [#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 [#tech-stack]

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

## How It Works [#how-it-works]

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

Users then install any component:

```bash
npx shadcn@latest add https://ogimagecn.vercel.app/r/blog.json
```

…and render it on the server:

```tsx title="app/og/route.tsx"
import { 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 [#faq]

<Accordion type="multiple">
  <AccordionItem value="faq-1">
    <AccordionTrigger>
      What is Satori?
    </AccordionTrigger>

    <AccordionContent>
      [Satori](https://github.com/vercel/satori) is Vercel's library that converts
      HTML and CSS into SVG. It powers `next/og`'s `ImageResponse`. It supports a
      subset of CSS — primarily flexbox — which is why every component here uses
      inline flex styles.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-2">
    <AccordionTrigger>
      Can I preview these in the browser without a server?
    </AccordionTrigger>

    <AccordionContent>
      Yes. Because the components only use the Satori-compatible CSS subset, they are
      valid DOM too. The docs render each one as a scaled `div`, so previews are
      instant and need no image generation.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-3">
    <AccordionTrigger>
      Can I add my own components?
    </AccordionTrigger>

    <AccordionContent>
      Absolutely. Add a file to `registry/ogimagecn/`, list it in `registry.json`,
      write an MDX doc, and run `pnpm registry:build`.
    </AccordionContent>
  </AccordionItem>
</Accordion>