Open Graph Card

A specialized component for generating beautiful Open Graph images (1200x630px). Customize in real-time with interactive controls.

Content

96px
42px

Gradient

135°
0°90°180°270°360°

Save Design

1200 × 630px preview (scaled to fit)

OpenCosmos UI

Make it lovable.

Installation

pnpm add @opencosmos/ui

Basic Usage

import { OpenGraphCard } from '@opencosmos/ui';

// In your app/opengraph-image.tsx (Next.js)
export default function OGImage() {
  return (
    <OpenGraphCard
      title="My Page"
      description="A description of my page"
    />
  );
}

With Custom Icon

import { OpenGraphCard } from '@opencosmos/ui';

export default function OGImage() {
  return (
    <OpenGraphCard
      title="My Brand"
      description="Tagline here"
      icon={
        <img
          src="/logo.png"
          width={80}
          height={80}
          alt="Logo"
        />
      }
    />
  );
}

Props

titlestring

Main title text displayed prominently on the card.

descriptionstring

Subtitle or description text displayed below the title.

iconReactNode

Custom logo, icon, or image element. Pass null to hide the default icon.

gradientGradientConfig

Custom gradient configuration with type, colors, angle (linear), or position (radial).

variant'primary' | 'secondary' | 'accent' | 'sage' | 'gradient'

Preset visual style variant. Use 'gradient' with custom gradient prop for full control.