# Installation

Install an ogimagecn component and render it as an Open Graph image.

> 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).



## Install a component [#install-a-component]

Pick a component from the [gallery](/docs/components) and add it with the shadcn
CLI. The component is copied into your project at `components/og/<name>.tsx`.

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

## Render it as an OG image [#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).

```tsx title="app/og/route.tsx"
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 [#wire-it-into-your-metadata]

Point your page's Open Graph metadata at the route:

```tsx title="app/page.tsx"
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) [#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`:

```tsx title="app/og/route.tsx"
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 [#building-your-own-registry]

ogimagecn is a normal shadcn registry, so you can extend it:

### 1. Add a component [#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 [#2-register-it]

```json title="registry.json"
{
  "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 [#3-build--deploy]

```bash
pnpm registry:build
pnpm build
```