@ogimagecn

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

22 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

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

22 total

Simple component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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 component

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