Ogimagecn

https://www.ogimagecn.com/docs
Admin
Ogimagecn is a shadcn registry of beautiful Open Graph image components built on Satori.
Tokens:13,896
Snippets:176
Trust Score:2.4
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install UI Component using Full URL

Source: https://www.ogimagecn.com/docs/registry

Alternatively, install a UI component by providing the full URL to the component's JSON definition in the registry.

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

--------------------------------

### Install Grid Component via CLI

Source: https://www.ogimagecn.com/docs/components/grid

Use the shadcn-ui CLI to add the Grid component to your project. This is the recommended installation method.

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

--------------------------------

### Install Simple Component via CLI

Source: https://www.ogimagecn.com/docs/components/simple

Use the npx command to add the @ogimagecn/simple package to your project.

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

--------------------------------

### Install Photo Component via CLI

Source: https://www.ogimagecn.com/docs/components/photo

Use the shadcn-ui CLI to add the Photo component to your project.

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

--------------------------------

### Usage Example

Source: https://www.ogimagecn.com/docs/components/photo

Example of how to use the Photo component within a Next.js API route to generate an Open Graph image.

```APIDOC
## Usage Example

This example demonstrates how to use the `Photo` component in a Next.js API route.

```tsx
import { ImageResponse } from "next/og";

import { Photo } from "@/components/og/photo";

export function GET() {
  return new ImageResponse(
    <Photo
      image="https://images.unsplash.com/photo-1469474968028-56623f02e42e"
      label="Travel"
      title="Chasing light across the northern coast"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```
```

--------------------------------

### Install Profile Component via CLI

Source: https://www.ogimagecn.com/docs/components/profile

Use the shadcn-ui CLI to add the Profile component to your project.

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

--------------------------------

### Install Logo Component via CLI

Source: https://www.ogimagecn.com/docs/components/logo

Use the shadcn-ui CLI to add the Logo component to your project. This is the recommended installation method.

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

--------------------------------

### Install Showcase Component via CLI

Source: https://www.ogimagecn.com/docs/components/showcase

Use this command to add the Showcase component to your project using the shadcn-ui CLI.

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

--------------------------------

### Usage Example

Source: https://www.ogimagecn.com/docs/components/owner

Example of how to use the Owner component within a Next.js API route to generate an Open Graph image.

```APIDOC
```tsx
import { ImageResponse } from "next/og";

import { Owner } from "@/components/og/owner";

export function GET() {
  return new ImageResponse(
    <Owner
      eyebrow="Meet Owner."
      title="We make online growth easy for restaurants."
      brand="Owner"
      images={[
        "https://picsum.photos/id/1005/400/400",
        "https://picsum.photos/id/1012/400/400",
        "https://picsum.photos/id/1025/400/400",
      ]}
    />,
    { width: 1200, height: 630 }
  );
}
```
```

--------------------------------

### Install Blog Component via CLI

Source: https://www.ogimagecn.com/docs/components/blog

Use this command to add the Blog component to your project using the shadcn-ui CLI.

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

--------------------------------

### Install Product Component via CLI

Source: https://www.ogimagecn.com/docs/components/product

Use this command to add the Product component to your project using the shadcn CLI.

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

--------------------------------

### Install Editorial Component via CLI

Source: https://www.ogimagecn.com/docs/components/editorial

Use the shadcn-ui CLI to add the Editorial component to your project. This is the recommended installation method.

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

--------------------------------

### Install Shadcn Registry 3 via CLI

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-3

Use the shadcn-cli to add the Shadcn Registry 3 component to your project.

```bash
npx shadcn@latest add @ogimagecn/shadcn-registry-3
```

--------------------------------

### Generate Open Graph Image with Owner Component

Source: https://www.ogimagecn.com/docs/components/owner

This example demonstrates how to use the Owner component within a Next.js API route to generate an Open Graph image. Ensure you have the 'next/og' library installed.

```tsx
import { ImageResponse } from "next/og";

import { Owner } from "@/components/og/owner";

export function GET() {
  return new ImageResponse(
    <Owner
      eyebrow="Meet Owner."
      title="We make online growth easy for restaurants."
      brand="Owner"
      images={[
        "https://picsum.photos/id/1005/400/400",
        "https://picsum.photos/id/1012/400/400",
        "https://picsum.photos/id/1025/400/400",
      ]}
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Install Quote Component via CLI

Source: https://www.ogimagecn.com/docs/components/quote

Use the shadcn-ui CLI to add the Quote component to your project.

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

--------------------------------

### Install Stat Component via CLI

Source: https://www.ogimagecn.com/docs/components/stat

Use the shadcn-ui CLI to add the Stat component to your project.

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

--------------------------------

### Usage Example for Shadcn Registry 3

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-3

This example shows how to use the ShadcnRegistry3 component within a Next.js API route to generate an Open Graph image. It demonstrates passing props like title, credit, and ghost.

```tsx
import {
  ImageResponse
} from "next/og";

import { ShadcnRegistry3 } from "@/components/og/shadcn-registry-3";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry3
      title="Brand new uncommon components for your Next.js project. fast-growing freemium (Works with Shadcn CLI 3.0)"
      credit="Design And Devloped By @Gxuri"
      ghost="SKIPER"
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Install Shiori Component via CLI

Source: https://www.ogimagecn.com/docs/components/shiori

Use this command to add the Shiori component to your project using the shadcn-ui CLI.

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

--------------------------------

### Install Shadcn Registry 5 via CLI

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-5

Use the shadcn-cli to add the Shadcn Registry 5 component to your project.

```bash
npx shadcn@latest add @ogimagecn/shadcn-registry-5
```

--------------------------------

### Install Shadcn Registry 2 via CLI

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-2

Use the npx command to add the Shadcn Registry 2 component to your project.

```bash
npx shadcn@latest add @ogimagecn/shadcn-registry-2
```

--------------------------------

### Profile Component Usage

Source: https://www.ogimagecn.com/docs/components/profile

Example of how to use the Profile component within a Next.js ImageResponse.

```APIDOC
## Profile Component Usage

This example demonstrates how to integrate the `Profile` component into a Next.js API route to generate an Open Graph image.

### Code Example

```tsx
import { ImageResponse } from "next/og";

import { Profile } from "@/components/og/profile";

export function GET() {
  return new ImageResponse(
    <Profile
      name="Ada Lovelace"
      role="Founder & Engineer"
      bio="Building tools for the open web."
      website="ada.dev"
      avatar="https://example.com/avatar.png"
    />,
    { width: 1200, height: 630 }
  );
}
```
```

--------------------------------

### Grid Component Usage Example

Source: https://www.ogimagecn.com/docs/components/grid

Example of how to use the Grid component within a Next.js API route for generating Open Graph images. Ensure the import paths match your project structure.

```tsx
import {
  ImageResponse
} from "next/og";

import { Grid } from "@/components/og/grid";

export function GET() {
  return new ImageResponse(
    <Grid
      title="Build your own OG images"
      description="Composable components powered by Satori and the next/og runtime."
      brand="ogimagecn"
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Generate Open Graph Image with Editorial Component

Source: https://www.ogimagecn.com/docs/components/editorial

This example demonstrates how to use the Editorial component within a Next.js API route to generate an Open Graph image. Ensure you have the 'next/og' package installed.

```tsx
import { ImageResponse } from "next/og";

import { Editorial } from "@/components/og/editorial";

export function GET() {
  return new ImageResponse(
    <Editorial
      kicker="Feature"
      title="Designing at the edge of the canvas"
      meta="Issue 04"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Install Shadcn Registry 1 Component via CLI

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-1

Use the shadcn CLI to add the @ogimagecn/shadcn-registry-1 package to your project.

```bash
npx shadcn@latest add @ogimagecn/shadcn-registry-1
```

--------------------------------

### Install Shadcn Registry 6 via CLI

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-6

Use the npx command to add the Shadcn Registry 6 component to your project.

```bash
npx shadcn@latest add @ogimagecn/shadcn-registry-6
```

--------------------------------

### Install Owner Component via CLI

Source: https://www.ogimagecn.com/docs/components/owner

Use this command to add the Owner component to your project using the shadcn-ui CLI.

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

--------------------------------

### Install Terminal Component via CLI

Source: https://www.ogimagecn.com/docs/components/terminal

Use this command to add the Terminal component to your project using npm.

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

--------------------------------

### Install Changelog Component via CLI

Source: https://www.ogimagecn.com/docs/components/changelog

Use this command to add the Changelog component to your project using the shadcn CLI.

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

--------------------------------

### Install Event Component via CLI

Source: https://www.ogimagecn.com/docs/components/event

Use this command to add the Event component to your project using the shadcn-ui CLI.

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

--------------------------------

### Install Shadcn Registry 4 via CLI

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-4

Use this command to add the Shadcn Registry 4 component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @ogimagecn/shadcn-registry-4
```

--------------------------------

### Product Component Usage

Source: https://www.ogimagecn.com/docs/components/product

Example of how to use the Product component within a Next.js API route to generate an Open Graph image.

```APIDOC
## Product Component Usage

This example demonstrates how to integrate the `Product` component into a Next.js API route to dynamically generate an Open Graph image.

### Code Example

```tsx
import { ImageResponse } from "next/og";

import { Product } from "@/components/og/product";

export function GET() {
  return new ImageResponse(
    <Product
      title="Acme Pro"
      description="Everything you need to ship faster."
      price="$49"
      image="https://example.com/product.png"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```
```

--------------------------------

### Simple Component Usage

Source: https://www.ogimagecn.com/docs/components/simple

Example of how to use the Simple component within a Next.js API route to generate an Open Graph image.

```APIDOC
## Simple Component Usage

This example demonstrates how to integrate the `Simple` component into a Next.js API route to dynamically generate an Open Graph image.

### Method
GET

### Endpoint
/api/og

### Parameters
#### Request Body
This component is used within the `ImageResponse` constructor, and its props are passed directly.

- **label** (string) - Required - The eyebrow label for the image.
- **title** (string) - Required - The main title for the image.
- **description** (string) - Required - A brief description to be displayed on the image.
- **brand** (string) - Required - The brand name or identifier.
- **logo** (string) - Optional - A URL or path to a logo to be displayed on the image.

### Request Example
```tsx
import { ImageResponse } from "next/og";

import { Simple } from "@/components/og/simple";

export function GET() {
  return new ImageResponse(
    <Simple
      label="Open Graph"
      title="Hello world"
      description="A shadcn registry of social card components."
      brand="ogimagecn"
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

### Response
#### Success Response (200)
Returns an image response object suitable for Open Graph meta tags.
```

--------------------------------

### Shiori Component Usage

Source: https://www.ogimagecn.com/docs/components/shiori

Example of how to use the Shiori component within a Next.js API route to generate an Open Graph image.

```APIDOC
## Usage

```tsx
import { ImageResponse } from "next/og";

import { Shiori } from "@/components/og/shiori";

export function GET() {
  return new ImageResponse(
    <Shiori
      title="A beautifully simple read-it-later app"
      background="#faf6f1"
      titleColor="#8b7e74"
      logo="https://www.shiori.sh/logo.png"
      brand="Shiori"
      brandColor="#1a1a1a"
    />,
    { width: 1200, height: 630 }
  );
}
```
```

--------------------------------

### Generate Product Open Graph Image

Source: https://www.ogimagecn.com/docs/components/product

Example of generating a product Open Graph image using Next.js ImageResponse. Ensure the Product component is correctly imported and props are provided.

```tsx
import {
  ImageResponse
} from "next/og";

import { Product } from "@/components/og/product";

export function GET() {
  return new ImageResponse(
    <Product
      title="Acme Pro"
      description="Everything you need to ship faster."
      price="$49"
      image="https://example.com/product.png"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Blog Social Image with Next.js

Source: https://www.ogimagecn.com/docs/components/blog

This example shows how to use the Blog component within a Next.js API route to generate a social image. Ensure you have the necessary imports for ImageResponse and the Blog component.

```tsx
import {
  ImageResponse
} from "next/og";

import { Blog } from "@/components/og/blog";

export function GET() {
  return new ImageResponse(
    <Blog
      author="Ada Lovelace"
      category="Engineering"
      excerpt="A deep dive into Satori, the next/og runtime, and shipping fast cards."
      meta="Jun 5, 2026 · 6 min read"
      title="How we generate social images at the edge"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### ShadcnRegistry2 Component Usage

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-2

Example of how to use the ShadcnRegistry2 component within a Next.js ImageResponse for generating Open Graph images.

```APIDOC
## ShadcnRegistry2 Component Usage

### Description
This code snippet demonstrates how to integrate the `ShadcnRegistry2` component into a Next.js application to generate dynamic Open Graph images. It utilizes the `ImageResponse` class from `next/og`.

### Method
```typescript
export function GET()
```

### Endpoint
This is a serverless function typically found in Next.js API routes (e.g., `app/api/og/route.ts`).

### Parameters
#### Props for ShadcnRegistry2
- **name** (string) - Required - The name to display on the OG image.
- **category** (string) - Required - The category to display on the OG image.
- **title** (string) - Required - The main title to display on the OG image.
- **items** (string[]) - Required - A list of tags or items to display.
- **logo** (string) - Optional - URL or path to a logo to include.
- **accent** (string) - Optional - A color value for accent elements.

### Request Example
```tsx
import { ImageResponse } from "next/og";

import { ShadcnRegistry2 } from "@/components/og/shadcn-registry-2";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry2
      name="PaceKit"
      category="GSAP"
      title="Animated components crafted for smooth interaction"
      items={["Reusable", "Scalable", "Composable"]}
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

### Response
#### Success Response (ImageResponse)
- The `ImageResponse` object configured with the specified dimensions and the rendered `ShadcnRegistry2` component.

#### Response Example
(This would be the generated image, not a JSON response)
```

--------------------------------

### Generate Open Graph Image with Logo

Source: https://www.ogimagecn.com/docs/components/logo

Example of generating an Open Graph image using the Logo component in a Next.js application. Ensure Next.js ImageResponse is imported.

```tsx
import { ImageResponse } from "next/og";

import { Logo } from "@/components/og/logo";

export function GET() {
  return new ImageResponse(
    <Logo
      brand="acme"
      tagline="The all-in-one platform"
      background="#09090b"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Open Graph Image with Shadcn Registry 2

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-2

This example demonstrates how to use the ShadcnRegistry2 component within a Next.js API route to generate an Open Graph image. It shows how to pass props like name, category, title, and items to customize the image.

```tsx
import { ImageResponse } from "next/og";

import { ShadcnRegistry2 } from "@/components/og/shadcn-registry-2";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry2
      name="PaceKit"
      category="GSAP"
      title="Animated components crafted for smooth interaction"
      items={["Reusable", "Scalable", "Composable"]}
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### ShadcnRegistry3 Component Usage

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-3

Example of how to use the ShadcnRegistry3 component within a Next.js API route to generate an Open Graph image.

```APIDOC
## ShadcnRegistry3 Component Usage

### Description
This code snippet demonstrates how to integrate the `ShadcnRegistry3` component into a Next.js application to generate dynamic Open Graph images. It utilizes the `ImageResponse` from `next/og` to render the component.

### Method
```typescript
export function GET()
```

### Endpoint
This is typically used within a Next.js API route (e.g., `app/api/og/route.ts`).

### Parameters
#### Props for `ShadcnRegistry3`
- **title** (string) - Required - The main title text to display on the image.
- **credit** (string) - Required - The credit text to display on the image.
- **ghost** (string) - Optional - Text for a ghost watermark.
- **logo** (string) - Optional - URL or path to a logo to display.
- **accent** (string) - Optional - Accent color for the component.

### Request Example
```tsx
<ShadcnRegistry3
  title="Brand new uncommon components for your Next.js project. fast-growing freemium (Works with Shadcn CLI 3.0)"
  credit="Design And Devloped By @Gxuri"
  ghost="SKIPER"
/>
```

### Response
#### Success Response (ImageResponse)
- The `ImageResponse` object configured with the component and image dimensions.

#### Response Example
```typescript
return new ImageResponse(
  <ShadcnRegistry3
    title="Brand new uncommon components for your Next.js project. fast-growing freemium (Works with Shadcn CLI 3.0)"
    credit="Design And Devloped By @Gxuri"
    ghost="SKIPER"
  />,
  {
    width: 1200,
    height: 630,
  }
);
```
```

--------------------------------

### Generate Open Graph Image with ShadcnRegistry1

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-1

This example shows how to use the ShadcnRegistry1 component within a Next.js API route to generate an Open Graph image. It requires importing ImageResponse from 'next/og' and the ShadcnRegistry1 component itself. Configure the image dimensions and pass the desired name, URL, description, and items as props.

```tsx
import { ImageResponse } from "next/og";

import { ShadcnRegistry1 } from "@/components/og/shadcn-registry-1";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry1
      name="shadcn/ui"
      url="ui.shadcn.com"
      description="Beautifully designed components built with Radix UI and Tailwind CSS."
      items={["159+ components", "open source", "accessible"]}
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Generate Open Graph Image with Terminal Component

Source: https://www.ogimagecn.com/docs/components/terminal

Example of using the Terminal component within a Next.js API route to generate an Open Graph image. Ensure the import paths are correct for your project.

```tsx
import { ImageResponse } from "next/og";

import { Terminal } from "@/components/og/terminal";

export function GET() {
  return new ImageResponse(
    <Terminal
      brand="acme"
      title="Now in public beta"
      caption="npm i @acme/sdk"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Stat Open Graph Image

Source: https://www.ogimagecn.com/docs/components/stat

Example of using the Stat component within a Next.js API route to generate an Open Graph image.

```tsx
import { ImageResponse } from "next/og";

import { Stat } from "@/components/og/stat";

export function GET() {
  return new ImageResponse(
    <Stat
      label="Images rendered"
      value="10M+"
      trend="+24%"
      caption="Open Graph images generated with next/og this year."
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate OG Image with Quote Component

Source: https://www.ogimagecn.com/docs/components/quote

Example of using the Quote component within a Next.js API route to generate an Open Graph image.

```tsx
import { ImageResponse } from "next/og";

import { Quote } from "@/components/og/quote";

export function GET() {
  return new ImageResponse(
    <Quote
      author="Grace Hopper"
      handle="@gracehopper"
      quote="This is hands down the fastest way to ship beautiful OG images."
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Open Graph Image with Shiori

Source: https://www.ogimagecn.com/docs/components/shiori

This code snippet demonstrates how to use the Shiori component within a Next.js API route to generate an Open Graph image. Ensure the import paths are correct for your project setup.

```tsx
import { ImageResponse } from "next/og";

import { Shiori } from "@/components/og/shiori";

export function GET() {
  return new ImageResponse(
    <Shiori
      title="A beautifully simple read-it-later app"
      background="#faf6f1"
      titleColor="#8b7e74"
      logo="https://www.shiori.sh/logo.png"
      brand="Shiori"
      brandColor="#1a1a1a"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Photo ImageResponse

Source: https://www.ogimagecn.com/docs/components/photo

This code snippet demonstrates how to use the Photo component within a Next.js API route to generate an Open Graph image. Ensure the import paths are correct for your project setup.

```tsx
import {
  ImageResponse
} from "next/og";

import {
  Photo
} from "@/components/og/photo";

export function GET() {
  return new ImageResponse(
    <Photo
      image="https://images.unsplash.com/photo-1469474968028-56623f02e42e"
      label="Travel"
      title="Chasing light across the northern coast"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Open Graph Image with Shadcn Registry 4

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-4

This code snippet demonstrates how to use the ShadcnRegistry4 component within a Next.js API route to generate an Open Graph image. Ensure the import paths are correct for your project setup.

```tsx
import {
  ImageResponse
} from "next/og";

import { ShadcnRegistry4 } from "@/components/og/shadcn-registry-4";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry4
      name="Animate UI"
      title="Discover animated primitives, components, and icons for building expressive, modern UIs"
      url="animate-ui.com"
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Generate Event Open Graph Image

Source: https://www.ogimagecn.com/docs/components/event

This code snippet demonstrates how to use the Event component within a Next.js API route to generate an Open Graph image. Ensure the import paths are correct for your project setup.

```tsx
import {
  ImageResponse
} from "next/og";

import { Event } from "@/components/og/event";

export function GET() {
  return new ImageResponse(
    <Event
      label="Webinar"
      title="Shipping beautiful OG images at scale"
      date="Jun 5, 2026 · 10:00 AM PT"
      location="Online"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Build and Deploy Registry

Source: https://www.ogimagecn.com/docs/installation

After defining your custom registry, use these commands to build the registry and then build your project.

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

--------------------------------

### Initialize MCP Server with shadcn CLI

Source: https://www.ogimagecn.com/docs/mcp

Run this command to initialize the MCP server. You will be prompted to choose an MCP client and enable the server within it.

```bash
npx shadcn@latest mcp init
```

--------------------------------

### Product Component API Reference

Source: https://www.ogimagecn.com/docs/components/product

Reference for the props available for the Product component.

```APIDOC
## Product Component API Reference

The `Product` component accepts the following props:

### Props

| Prop          | Type     |
| ------------- | -------- |
| `brand`       | `string` |
| `title`       | `string` |
| `description` | `string` |
| `price`       | `string` |
| `image`       | `string` |
| `logo`        | `string` |
```

--------------------------------

### Blog Component API Reference

Source: https://www.ogimagecn.com/docs/components/blog

The Blog component accepts the following props to customize the generated Open Graph image.

```APIDOC
## Blog Component Props

### Description
Props for the Blog component used to generate article Open Graph images.

### Props
#### Required Props
- **category** (string) - The category of the blog post.
- **title** (string) - The title of the blog post.
- **excerpt** (string) - A short excerpt from the blog post.
- **author** (string) - The author of the blog post.
- **meta** (string) - Metadata about the blog post, such as publish date and read time.

#### Optional Props
- **avatar** (string) - URL to the author's avatar image.
- **brand** (string) - The brand name to display on the image.
- **logo** (string) - URL to the brand logo image.
```

--------------------------------

### Add ogimagecn Registry to components.json

Source: https://www.ogimagecn.com/docs/registry

Configure your `components.json` to include the ogimagecn registry. Replace `@ogimagecn` with your preferred namespace if needed.

```json
{
  "registries": {
    "@ogimagecn": "https://ogimagecn.dev/r/{name}.json"
  }
}
```

--------------------------------

### Shiori Component API Reference

Source: https://www.ogimagecn.com/docs/components/shiori

API reference for the Shiori component, detailing its available props.

```APIDOC
## API Reference

### Shiori

| Prop         | Type     |
| ------------ | -------- |
| `title`      | `string` |
| `background` | `string` |
| `titleColor` | `string` |
| `logo`       | `string` |
| `brand`      | `string` |
| `brandColor` | `string` |
```

--------------------------------

### Profile Component API Reference

Source: https://www.ogimagecn.com/docs/components/profile

Reference for the props available for the Profile component.

```APIDOC
## Profile Component API Reference

The `Profile` component accepts the following props:

### Props

| Prop      | Type     |
| --------- | -------- |
| `name`    | `string` |
| `role`    | `string` |
| `bio`     | `string` |
| `avatar`  | `string` |
| `website` | `string` |
```

--------------------------------

### Register Custom OG Image Component

Source: https://www.ogimagecn.com/docs/installation

Define your custom component in `registry/ogimagecn/yours.tsx` using flexbox and inline styles for cross-environment compatibility. Then, register it in `registry.json`.

```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"
        }
      ]
    }
  ]
}
```

--------------------------------

### Render OG Image with Next.js Route Handler

Source: https://www.ogimagecn.com/docs/installation

Create a route handler in Next.js to render an ogimagecn component as a PNG. This uses `next/og`'s `ImageResponse` and dynamically fetches query parameters for title and description.

```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 }
  );
}
```

--------------------------------

### Grid API Reference

Source: https://www.ogimagecn.com/docs/components/grid

Reference for the props available for the Grid component.

```APIDOC
## Grid Component API Reference

### Props

| Prop | Type | Description |
|---|---|---|
| `title` | `string` | The main title to display on the image. |
| `description` | `string` | A secondary description to display on the image. |
| `brand` | `string` | The brand name to display, typically in the corner. |
| `logo` | `string` | Optional URL for a custom logo to display. |
```

--------------------------------

### Generate Simple Open Graph Image

Source: https://www.ogimagecn.com/docs/components/simple

This code snippet demonstrates how to generate a Next.js ImageResponse using the Simple component. Ensure you have the necessary imports from 'next/og' and your component.

```tsx
import { ImageResponse } from "next/og";

import { Simple } from "@/components/og/simple";

export function GET() {
  return new ImageResponse(
    <Simple
      label="Open Graph"
      title="Hello world"
      description="A shadcn registry of social card components."
      brand="ogimagecn"
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Changelog Component API Reference

Source: https://www.ogimagecn.com/docs/components/changelog

Reference for the props available for the Changelog component.

```APIDOC
## Changelog Component API

### Props

- **version** (string) - The version number of the changelog.
- **date** (string) - The date associated with the changelog entry.
- **title** (string) - The main title for the changelog.
- **items** (string[]) - A list of highlights or key points.
- **brand** (string) - The brand name to display.
- **logo** (string) - Optional URL for a logo to display.
```

--------------------------------

### Render an OG Image Component with Next.js

Source: https://www.ogimagecn.com/docs

This snippet demonstrates how to render an ogimagecn component as an Open Graph image using Next.js's ImageResponse. Ensure the component is imported correctly and passed as a prop to ImageResponse.

```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,
  });
}
```

--------------------------------

### Generate Showcase Open Graph Image

Source: https://www.ogimagecn.com/docs/components/showcase

This code snippet demonstrates how to use the Showcase component within a Next.js API route to generate an Open Graph image. Ensure you have the necessary imports for ImageResponse and the Showcase component.

```tsx
import { ImageResponse } from "next/og";

import { Showcase } from "@/components/og/showcase";

export function GET() {
  return new ImageResponse(
    <Showcase
      title="Run your business smarter"
      subtitle="Every metric in one calm view."
      url="app.acme.com"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Changelog OG Image

Source: https://www.ogimagecn.com/docs/components/changelog

This Next.js route handler generates an Open Graph image for a changelog. Ensure the `Changelog` component is correctly imported and configured with the necessary props.

```tsx
import { ImageResponse } from "next/og";

import { Changelog } from "@/components/og/changelog";

export function GET() {
  return new ImageResponse(
    <Changelog
      date="June 2026"
      items={["New OG components", "Live previews", "One-line install"]}
      title="What's new"
      version="v2.0"
      brand="ogimagecn"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### ShadcnRegistry3 API Reference

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-3

API reference detailing the props available for the ShadcnRegistry3 component.

```APIDOC
## ShadcnRegistry3 API Reference

### Props

| Prop     | Type     | Description                                                                                                |
| -------- | -------- | ---------------------------------------------------------------------------------------------------------- |
| `title`  | `string` | The main title text to be displayed on the Open Graph image.                                               |
| `credit` | `string` | The credit text, typically indicating the designer or developer, to be displayed on the image.             |
| `ghost`  | `string` | Optional text that can be displayed as a subtle watermark or ghost element on the image.                 |
| `logo`   | `string` | Optional URL or path to a logo image to be included in the Open Graph image.                               |
| `accent` | `string` | Optional accent color that can be applied to various elements within the Open Graph image for styling. |
```

--------------------------------

### Configure Open Graph Metadata

Source: https://www.ogimagecn.com/docs/installation

Point your page's Open Graph and Twitter metadata to the generated OG image route. Ensure the path and query parameters match your route handler.

```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"],
  },
};
```

--------------------------------

### Event Component API Reference

Source: https://www.ogimagecn.com/docs/components/event

This section details the props available for the Event component, which are used to customize the generated Open Graph image.

```APIDOC
## Event Component API Reference

### Props

| Prop       | Type     |
| ---------- | -------- |
| `label`    | `string` |
| `brand`    | `string` |
| `title`    | `string` |
| `date`     | `string` |
| `location` | `string` |
| `logo`     | `string` |
```

--------------------------------

### Photo Component API Reference

Source: https://www.ogimagecn.com/docs/components/photo

The Photo component accepts the following props to customize the Open Graph image.

```APIDOC
## Photo Component API Reference

### Description

This component generates a full-bleed photo Open Graph image with a dark gradient scrim and a bottom-aligned title block.

### Props

| Prop    | Type     | Description                                      |
| ------- | -------- | ------------------------------------------------ |
| `image` | `string` | The URL of the background image.                 |
| `label` | `string` | A label to display on the image.                 |
| `title` | `string` | The main title to display on the image.          |
| `brand` | `string` | The brand name to display on the image.          |
| `logo`  | `string` | Optional URL for a custom logo.                  |
```

--------------------------------

### Generate Profile Open Graph Image

Source: https://www.ogimagecn.com/docs/components/profile

This code snippet demonstrates how to use the Profile component within a Next.js API route to generate an Open Graph image. Ensure you have the necessary imports from 'next/og' and the local profile component.

```tsx
import { ImageResponse } from "next/og";

import { Profile } from "@/components/og/profile";

export function GET() {
  return new ImageResponse(
    <Profile
      name="Ada Lovelace"
      role="Founder & Engineer"
      bio="Building tools for the open web."
      website="ada.dev"
      avatar="https://example.com/avatar.png"
    />,
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Generate Open Graph Image with ShadcnRegistry5

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-5

This code snippet demonstrates how to use the ShadcnRegistry5 component within a Next.js API route to generate an Open Graph image. Ensure you have the necessary imports from 'next/og' and your local components.

```tsx
import {
  ImageResponse
} from "next/og";

import { ShadcnRegistry5 } from "@/components/og/shadcn-registry-5";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry5
      name="Eldora UI"
      title="Modern Next.js Templates"
      description="Built with React, Typescript, shadcn/ui, Tailwind CSS, and Motion."
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Render OG Image with Custom Fonts

Source: https://www.ogimagecn.com/docs/installation

To use custom fonts, fetch the font file as an ArrayBuffer and pass it to the `fonts` option in `ImageResponse`. The first font provided will be the default.

```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" }],
  });
}
```

--------------------------------

### Quote Component API Reference

Source: https://www.ogimagecn.com/docs/components/quote

This section details the props available for the Quote component, which can be used to customize the generated Open Graph image.

```APIDOC
## Quote Component API Reference

This section details the props available for the Quote component, which can be used to customize the generated Open Graph image.

### Props

| Prop     | Type     |
| -------- | -------- |
| `quote`  | `string` |
| `author` | `string` |
| `handle` | `string` |
| `avatar` | `string` |
```

--------------------------------

### Stat API Reference

Source: https://www.ogimagecn.com/docs/components/stat

Reference for the props available on the Stat component.

```APIDOC
## Stat Component API Reference

### Props

| Prop      | Type     |
| --------- | -------- |
| `label`   | `string` |
| `value`   | `string` |
| `caption` | `string` |
| `trend`   | `string` |
| `brand`   | `string` |
| `logo`    | `string` |
```

--------------------------------

### ShadcnRegistry5 Component Props

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-5

The ShadcnRegistry5 component accepts the following props for customization: name, title, description, logo, and accent.

```APIDOC
## ShadcnRegistry5 Component

### Description

The ShadcnRegistry5 component is used to generate a clean light Open Graph image with centered logo, name, title, and description inside a bordered frame.

### Props

#### Required Props

- **name** (string) - The name to display on the Open Graph image.
- **title** (string) - The title to display on the Open Graph image.

#### Optional Props

- **description** (string) - The description to display on the Open Graph image.
- **logo** (string) - A URL or path to the logo to display on the Open Graph image.
- **accent** (string) - A color value to be used for accent elements in the image.
```

--------------------------------

### Usage of ShadcnRegistry6 in Next.js

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-6

This code snippet demonstrates how to use the ShadcnRegistry6 component within a Next.js API route to generate an Open Graph image. Ensure you have the 'next/og' and component imports correctly set up.

```tsx
import { ImageResponse } from "next/og";

import { ShadcnRegistry6 } from "@/components/og/shadcn-registry-6";

export function GET() {
  return new ImageResponse(
    <ShadcnRegistry6
      title="Build your own OG images"
      description="Composable components powered by Satori and the next/og runtime."
      brand="ogimagecn"
    />,
    {
      width: 1200,
      height: 630,
    }
  );
}
```

--------------------------------

### Owner Component API Reference

Source: https://www.ogimagecn.com/docs/components/owner

The Owner component accepts the following props to customize the Open Graph image.

```APIDOC
## Owner Component API Reference

### Props

| Prop      | Type       |
| --------- | ---------- |
| `eyebrow` | `string`   |
| `title`   | `string`   |
| `brand`   | `string`   |
| `images`  | `string[]` |
| `logo`    | `string`   |
```

--------------------------------

### ShadcnRegistry1 Component API

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-1

The ShadcnRegistry1 component accepts the following props to customize the Open Graph image.

```APIDOC
## ShadcnRegistry1

### Description
This component is used to generate an Open Graph image with a logo, name, URL, description, and tag badges.

### Props
#### Required Props
- **name** (string) - The name to display on the image.
- **url** (string) - The URL to display on the image.
- **description** (string) - The description to display on the image.
- **items** (string[]) - An array of strings to display as tags or badges.

#### Optional Props
- **logo** (string) - A URL to a logo to display on the image.
```

--------------------------------

### Editorial Component API Reference

Source: https://www.ogimagecn.com/docs/components/editorial

Reference for the props available for the Editorial component.

```APIDOC
## Editorial Component Props

### Description
This section details the available properties for customizing the Editorial component.

### Props
#### `kicker`
- **Type**: `string`
- **Description**: The kicker text for the component.

#### `title`
- **Type**: `string`
- **Description**: The main title text for the component.

#### `meta`
- **Type**: `string`
- **Description**: The meta information text for the component.

#### `ghost`
- **Type**: `string`
- **Description**: The ghost text displayed behind the main content.

#### `brand`
- **Type**: `string`
- **Description**: The brand name to be displayed.

#### `logo`
- **Type**: `string`
- **Description**: The URL or identifier for a logo to be displayed.
```

--------------------------------

### ShadcnRegistry6 Component API

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-6

The ShadcnRegistry6 component accepts the following props for generating Open Graph images.

```APIDOC
## ShadcnRegistry6 Component API Reference

### Props

- **title** (string) - The main title to display on the OG image.
- **description** (string) - The description text to display below the title.
- **brand** (string) - The brand name to display on the OG image.
- **logo** (string) - URL to a logo image to be displayed on the OG image.
```

--------------------------------

### ShadcnRegistry4 Component Props

Source: https://www.ogimagecn.com/docs/components/shadcn-registry-4

The ShadcnRegistry4 component accepts the following props to customize the Open Graph image. These props allow you to set the name, title, URL, logo, and accent color for the generated image.

```APIDOC
## ShadcnRegistry4 Component

### Description

The ShadcnRegistry4 component generates a centered dark Open Graph image with a logo, name, title, and URL on a subtle dot pattern background.

### Props

#### `name`
- **Type**: `string`
- **Description**: The name to display on the Open Graph image.

#### `title`
- **Type**: `string`
- **Description**: The title to display on the Open Graph image.

#### `url`
- **Type**: `string`
- **Description**: The URL to display on the Open Graph image.

#### `logo`
- **Type**: `string`
- **Description**: The URL of the logo to display on the Open Graph image.

#### `accent`
- **Type**: `string`
- **Description**: The accent color to use for the Open Graph image.
```
Tokens:
Raw