ogimagecn

Overview

ogimagecn is a collection of ready-to-use, customizable Open Graph image components for React by Aniket Pawar. It is built on Satori, distributed through the shadcn CLI, and blocks render with next/og, so OG images are written as React components and generated at request or build time.

The registry contains 22 OG image blocks and 6 smaller building-block components. Blocks are grouped into brand, content, product and shadcn registry categories, and the site includes a Playground for customizing them and a Scan tool. Docs are available as markdown for AI agents, and an MCP guide covers using the shadcn MCP server with the registry.

Features

• Content blocks: Blog, editorial, grid, photo, profile, quote, stat and terminal OG images.
• Product blocks: Changelog with version pill and highlights, event, logo, product with price pill, showcase and simple layouts.
• Brand blocks: Owner and Shiori layouts for brands, portfolios and personal sites.
• Registry showcase: Six blocks designed for promoting shadcn registries and component collections.
• Building blocks: Avatar, badge, brand mark, divider, grid lines and waveform components.
• Playground: Customize blocks visually before copying them.
• Agent friendly: llms.txt, markdown mirrors of every page and an agent skill file.

Tech stack

• React, Satori, next/og, shadcn CLI

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @ogimagecn/component-name