@ogimagecn

Beautiful OG images, made simple. Ready to use, customizable Open Graph image components for React.

28 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (28 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ogimagecn.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ogimagecn.vercel.app/r/registry.json

bun bunx shadcn@latest add https://ogimagecn.vercel.app/r/registry.json

fetch registry curl -s https://ogimagecn.vercel.app/r/registry.json

Components

28 total

Avatar ui

A circular avatar image with an initials fallback.

npx shadcn@latest add https://ogimagecn.vercel.app/r/avatar.json

Badge ui

A pill label with color, background, border, and uppercase options.

npx shadcn@latest add https://ogimagecn.vercel.app/r/badge.json

Brand Mark ui

A logo image with a placeholder tile fallback for monograms or icons.

npx shadcn@latest add https://ogimagecn.vercel.app/r/brand-mark.json

Divider ui

A solid or dashed rule with an optional centered label.

npx shadcn@latest add https://ogimagecn.vercel.app/r/divider.json

Grid Lines ui

Four edge-to-edge guide lines that frame the canvas.

npx shadcn@latest add https://ogimagecn.vercel.app/r/grid-lines.json

Waveform ui

A vertically centered audio waveform with configurable color, height, and bar spacing.

npx shadcn@latest add https://ogimagecn.vercel.app/r/waveform.json

Simple block

A minimal, centered Open Graph image with an eyebrow label, title, description, and brand mark.

npx shadcn@latest add https://ogimagecn.vercel.app/r/simple.json

Grid block

A framed, technical Open Graph image with a dashed border grid and a corner brand mark.

npx shadcn@latest add https://ogimagecn.vercel.app/r/grid.json

Blog block

An article Open Graph image with a category badge, headline, excerpt, and author row.

npx shadcn@latest add https://ogimagecn.vercel.app/r/blog.json

Changelog block

A release Open Graph image with a version pill, date, title, and a checklist of highlights.

npx shadcn@latest add https://ogimagecn.vercel.app/r/changelog.json

Quote block

A testimonial / tweet-style Open Graph image with a large quote and an author row.

npx shadcn@latest add https://ogimagecn.vercel.app/r/quote.json

Shadcn Registry 1 block

A showcase Open Graph image for shadcn registries with logo, name, URL, description, and tag badges.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shadcn-registry-1.json

Shadcn Registry 2 block

A clean Open Graph image with a light background, logo, name, category, title, and dot-separated tags.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shadcn-registry-2.json

Shadcn Registry 3 block

A bold dark Open Graph image with large title, circular badge, ghost watermark, and credit text.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shadcn-registry-3.json

Shadcn Registry 4 block

A centered dark Open Graph image with logo, name, title, and URL on a subtle dot pattern background.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shadcn-registry-4.json

Shadcn Registry 5 block

A clean light Open Graph image with centered logo, name, title, and description inside a bordered frame.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shadcn-registry-5.json

Shadcn Registry 6 block

A minimal Open Graph image with solid border lines, a logo in the top-left, and title/description at the bottom.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shadcn-registry-6.json

Photo block

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

npx shadcn@latest add https://ogimagecn.vercel.app/r/photo.json

Product block

A two-column product Open Graph image with brand and copy on the left, a product shot on the right, and a price pill.

npx shadcn@latest add https://ogimagecn.vercel.app/r/product.json

Profile block

A personal / portfolio Open Graph image with a circular avatar beside a name, role, bio, and website pill.

npx shadcn@latest add https://ogimagecn.vercel.app/r/profile.json

Event block

An event / launch Open Graph image with an eyebrow label, large title, and a date · location footer row.

npx shadcn@latest add https://ogimagecn.vercel.app/r/event.json

Stat block

A metric / dashboard Open Graph image with an eyebrow label, an oversized number, a trend pill, and a caption.

npx shadcn@latest add https://ogimagecn.vercel.app/r/stat.json

Logo block

A centered brand Open Graph image with a logo tile, a large wordmark, and an optional tagline on a soft gradient field.

npx shadcn@latest add https://ogimagecn.vercel.app/r/logo.json

Terminal block

A minimal, technical Open Graph image with a wordmark and accent side-bar above a large wide-tracked uppercase headline.

npx shadcn@latest add https://ogimagecn.vercel.app/r/terminal.json

Editorial block

A poster-style Open Graph image with oversized display type and a large faint ghost word set behind the content.

npx shadcn@latest add https://ogimagecn.vercel.app/r/editorial.json

Showcase block

A product-showcase Open Graph image with a centered headline above a faux browser window and a minimal dashboard UI.

npx shadcn@latest add https://ogimagecn.vercel.app/r/showcase.json

Shiori block

A clean, minimal Open Graph image with a light cream background, an orange gradient circle logo, and a bold title beside a muted description.

npx shadcn@latest add https://ogimagecn.vercel.app/r/shiori.json

Owner block

A clean Open Graph image with a light background, eyebrow text, bold headline, and three rounded photos at the bottom.

npx shadcn@latest add https://ogimagecn.vercel.app/r/owner.json