Generate Open Graph Images

OGCard renders the package’s mark and title on a dark background using inline styles, sized for the 1200x630 Open Graph format. It is designed for use inside next/og ImageResponse.

Next.js App Router

Create app/opengraph-image.tsx:

import { ImageResponse } from 'next/og'
import { OGCard } from '@n3wth/ui/og'

export const runtime = 'edge'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default function Image() {
  return new ImageResponse(<OGCard title="API reference" />, size)
}

Props

OGCard accepts one required prop:

Prop	Type	Description
`title`	`string`	Card headline; keep it short enough for the fixed title styling

OGCard does not accept a description, logo URL, color theme, or image dimensions. Inspect the generated image before shipping to production.

Entry Points

Reference for the @n3wth/ui/og module.

Theme Provider

Match your app’s theme when composing preview pages.

Last modified on September 20, 2026

Get Started

Theming

Components

Recipes

Reference

Generate Open Graph Images

Next.js App Router

Props

Entry Points

Theme Provider

​Next.js App Router

​Props

​Related

Entry Points

Theme Provider

Next.js App Router

Props

Related