# OG Examples

> OG style gallery with editable CONTENT examples.

A shadcn/ui block from the [@atroui](https://www.atroui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/atroui/og-examples).

- Page, with a live preview: https://shadcn.exchange/r/atroui/og-examples
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/atroui/og-examples-light-4208a63bbf10bad0.png
- Registry item: https://www.atroui.com/r/og-examples.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.atroui.com/r/og-examples.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `next`
- Registry items: `@atroui/utils`, `@atroui/og-live-preview`

## Files

### `registry/default/blocks/og-examples.tsx`

```tsx
"use client"

import Link from "next/link"

import { OgLivePreview, type OgStyleKey } from "./og-live-preview"
import { cn } from "@/lib/utils"

/** Edit CONTENT for demo cards shown in the gallery. */
const CONTENT = {
  examples: [
    {
      title: "Ship this week",
      subtitle: "Fixed-scope MVP",
      styleKey: "paperQuote" as OgStyleKey,
      href: "/og",
    },
    {
      title: "Own the UI",
      subtitle: "shadcn registry",
      styleKey: "boldSplit" as OgStyleKey,
      href: "/docs/registry",
    },
  ],
}

export function OgExamples({
  preview = false,
  className,
}: {
  preview?: boolean
  className?: string
}) {
  return (
    <div className={cn("grid gap-4 sm:grid-cols-2", className)}>
      {CONTENT.examples.map((ex) => (
        <Link
          key={ex.title}
          href={ex.href}
          className="group relative aspect-1200/630 overflow-hidden rounded-2xl border border-border-subtle"
        >
          <OgLivePreview
            title={ex.title}
            subtitle={ex.subtitle}
            styleKey={ex.styleKey}
          />
          {!preview ? (
            <span className="absolute right-3 bottom-3 rounded-md border border-white/20 bg-black/50 px-2.5 py-1 text-[11px] text-white backdrop-blur-sm">
              Open
            </span>
          ) : null}
        </Link>
      ))}
    </div>
  )
}
```