# Installation

Install an ogimagecn block from the registry and render it with next/og.

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



## Prerequisites [#prerequisites]

A [Next.js](https://nextjs.org) App Router project. Components render through [`next/og`](https://nextjs.org/docs/app/api-reference/functions/image-response), which ships with Next.js.

## Installation [#installation]

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

```bash
npx shadcn@latest add @ogimagecn/simple
```

The `simple` block is copied into `components/og/simple.tsx`, and the CLI pulls in the components it depends on automatically — there is nothing else to install.

## Usage [#usage]

Import the installed block and return it from a route handler as an `ImageResponse`:

```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
      brand="Acme"
      description="Everything new this week."
      label="Blog"
      title={searchParams.get("title") ?? "Hello world"}
    />,
    { height: 630, width: 1200 }
  );
}
```

Every component documents its props on its own page; the [customizer](/docs/components) shows each one live.

## Add to Metadata [#add-to-metadata]

Point your page's Open Graph and Twitter 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"],
  },
};
```

Then run the deployed URL through [Scan](/scan) to see the card each platform will build from it.

## Custom Fonts [#custom-fonts]

Satori uses the first font you pass as the default. Load the font file and hand 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
      brand="Acme"
      description="Everything new this week."
      label="Blog"
      title="Hello world"
    />,
    {
      fonts: [{ data: font, name: "Inter", style: "normal", weight: 600 }],
      height: 630,
      width: 1200,
    }
  );
}
```