Templates

Start with an Open Graph image template and edit its content and styles. The shadcn CLI copies a template into your project and installs takumi-js alongside it.

npx shadcn@latest add https://takumi.kane.tw/r/image/blog-post.json

Register the namespace in components.json to reach the same items by name:

{
  "registries": {
    "@takumi": "https://takumi.kane.tw/r/{name}.json"
  }
}

npx shadcn@latest add @takumi/image/blog-post

Items are grouped by what they render. Everything here is under image, and a card lands in components/takumi/image/.

A route that answers with an image

image/og-route is a Next.js route handler plus the card it renders. It creates an /og endpoint that reads the title from the query string.

npx shadcn@latest add @takumi/image/og-route

import { ImageResponse } from "takumi-js/response";

import BlogPostTemplate from "@/components/takumi/image/blog-post";

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);

  return new ImageResponse(
    <BlogPostTemplate
      author={searchParams.get("author") ?? "Takumi"}
      category={searchParams.get("category") ?? "Engineering"}
      date={searchParams.get("date") ?? "Today"}
      title={searchParams.get("title") ?? "Hello from Takumi"}
    />,
    { width: 1200, height: 630 },
  );
}

Point a page's metadata at it and every article gets its own card:

export const metadata = {
  openGraph: { images: [`/og?title=${encodeURIComponent(title)}`] },
};

The import above assumes the @/ alias. The CLI rewrites it to whatever components.json names, so a project on ~/ gets ~/components/takumi/image/blog-post.

The route lands only in a project the CLI recognizes as Next.js. Elsewhere it installs the card and leaves the route to you.

Blog Post Template

A blog post card with a large title and a subtitle.

npx shadcn@latest add @takumi/image/blog-post

Docs Template

A documentation card for guides and API pages.

npx shadcn@latest add @takumi/image/docs

Product Card Template

A product card with an image, name, and price.

npx shadcn@latest add @takumi/image/product-card

Event Template

An editorial card for talks, webinars, and conferences, with an oversized title and a clear when/where/host footer.

npx shadcn@latest add @takumi/image/event

Quote Template

A high-contrast quote and testimonial card with author and company attribution.

npx shadcn@latest add @takumi/image/quote

Repository Template

A developer-native card for open-source repositories, featuring the repo slug, description, and star, fork, and language stats.

npx shadcn@latest add @takumi/image/repository

Changelog Template

A release card with the version, the date, and a summary of what shipped.

npx shadcn@latest add @takumi/image/changelog