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

Entry PointsReference for the @n3wth/ui/og module.

Theme ProviderMatch your app's theme when composing preview pages.