--- name: "@ogimagecn" slug: "ogimagecn" description: "Beautiful OG images, made simple. Ready to use, customizable Open Graph image components for React." category: "Charts/data viz" tags: ["charts", "cms", "developer-tools", "editor", "icons", "media", "retro"] framework: "react" license: "MIT" author: "shadcn-labs" website: "https://ogimagecn.vercel.app" github: "https://github.com/shadcn-labs/ogimagecn" registry: "https://ogimagecn.vercel.app/r/registry.json" pro: false pro_url: null github_stars: 94 component_count: 22 generated_at: "2026-07-28T08:00:50.948Z" --- # @ogimagecn Beautiful OG images, made simple. Ready to use, customizable Open Graph image components for React. ## Links - Website: https://ogimagecn.vercel.app - GitHub: https://github.com/shadcn-labs/ogimagecn - Registry JSON: https://ogimagecn.vercel.app/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/ogimagecn - This file: https://sh4dcn.vercel.app/md/ogimagecn.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://ogimagecn.vercel.app/r/registry.json pnpm dlx shadcn@latest add https://ogimagecn.vercel.app/r/registry.json bunx shadcn@latest add https://ogimagecn.vercel.app/r/registry.json # clone the source repo git clone https://github.com/shadcn-labs/ogimagecn.git # fetch the raw registry index curl -s https://ogimagecn.vercel.app/r/registry.json ``` ## Components (22) | name | type | description | install | | --- | --- | --- | --- | | simple | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` | ## For AI agents ```text You are adding components from @ogimagecn to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/ogimagecn.md) for the component list. 2. Fetch the machine-readable index: https://ogimagecn.vercel.app/r/registry.json 3. Install a single component with its install command from the table above. 4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ogimagecn). ```