ruler-components 0.1.0

package/AGENTS.md

@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zuhaib Shahid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# ruler.ui
+
+Marketing site + docs shell for **ruler.ui**, a planned React component
+library. This repo currently contains a hardcoded front-end for the design
+(landing page + docs shell) — no published package, tokens system, or real
+component implementations yet. See `component-library-roadmap.pdf` for the
+full multi-phase plan this scaffold is a preview of.
+
+## Stack
+
+Next.js (App Router) · TypeScript · Tailwind CSS v4 · next-themes · lucide-react
+
+## Structure
+
+```
+app/
+  page.tsx              landing page
+  docs/
+    layout.tsx           docs shell (topbar + sidebar + footer)
+    page.tsx              "Introduction" content
+    [slug]/page.tsx        placeholder page for every other sidebar item
+components/
+  landing/                hero, navbar, feature highlights, quick start, footer
+  docs/                   docs topbar, sidebar, footer, next-steps, usage
+  ui/                     Button, CodeBlock, FeatureCard, PackageManagerTabs, ThemeToggle
+  icons/                  brand icons not in lucide (GitHub)
+data/
+  docs-nav.ts             hardcoded sidebar nav (groups, labels, icons)
+lib/
+  cn.ts                   className merge helper (clsx + tailwind-merge)
+```
+
+Colors are plain Tailwind utility classes (violet accent, zinc neutrals) —
+not yet backed by a CSS-variable token system. The sidebar links to a real
+`[slug]` route for every component, but only `Introduction` has real content;
+everything else renders a "coming soon" placeholder.
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).

package/app/docs/[slug]/page.tsx

@@ -0,0 +1,147 @@
+import { notFound } from "next/navigation";
+import { Construction } from "lucide-react";
+import { DOCS_NAV } from "@/data/docs-nav";
+import { DocsPage as DocsPageLayout, DocsPageHeader, DocsSection } from "@/components/docs/docs-page";
+import { AlertDocPage } from "@/components/docs/alert-doc-page";
+import { AvatarDocPage } from "@/components/docs/avatar-doc-page";
+import { BadgeDocPage } from "@/components/docs/badge-doc-page";
+import { ButtonDocPage } from "@/components/docs/button-doc-page";
+import { CardDocPage } from "@/components/docs/card-doc-page";
+import { CheckboxDocPage } from "@/components/docs/checkbox-doc-page";
+import { LabelDocPage } from "@/components/docs/label-doc-page";
+import { MenuDocPage } from "@/components/docs/menu-doc-page";
+import { ModalDocPage } from "@/components/docs/modal-doc-page";
+import { ProgressDocPage } from "@/components/docs/progress-doc-page";
+import { RadioDocPage } from "@/components/docs/radio-doc-page";
+import { SwitchDocPage } from "@/components/docs/switch-doc-page";
+import { TooltipDocPage } from "@/components/docs/tooltip-doc-page";
+import { AccordionDocPage } from "@/components/docs/accordion-doc-page";
+import { SkeletonDocPage } from "@/components/docs/skeleton-doc-page";
+import { DialogDocPage } from "@/components/docs/dialog-doc-page";
+import { TableDocPage } from "@/components/docs/table-doc-page";
+import { DropdownDocPage } from "@/components/docs/dropdown-doc-page";
+import { InputDocPage } from "@/components/docs/allinput-doc-page";
+import { TabsDocPage } from "@/components/docs/tabs-doc-page";
+import { PaginationDocPage } from "@/components/docs/pagination-doc-page";
+import { LoadersDocPage } from "@/components/docs/loaders-doc-page";
+import { StepperDocPage } from "@/components/docs/stepper-doc-page";
+import { ColorsDocPage } from "@/components/docs/colors-doc-page";
+import { ThemingDocPage } from "@/components/docs/theming-doc-page";
+import { GettingStartedDocPage } from "@/components/docs/getting-started-doc-page";
+
+
+
+export default async function DocsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  const item = DOCS_NAV.flatMap((group) => group.items).find(
+    (entry) => entry.slug === slug,
+  );
+
+  if (!item) notFound();
+
+  switch (slug) {
+    case "alert":
+      return <AlertDocPage />;
+
+    case "avatar":
+      return <AvatarDocPage />;
+
+    case "badge":
+      return <BadgeDocPage />;
+
+    case "button":
+      return <ButtonDocPage />;
+
+    case "card":
+      return <CardDocPage />;
+
+    case "checkbox":
+      return <CheckboxDocPage />;
+
+    case "label":
+      return <LabelDocPage />;
+
+    case "menu":
+      return <MenuDocPage />;
+
+    case "modal":
+      return <ModalDocPage />;
+
+    case "progress":
+      return <ProgressDocPage />;
+
+    case "radio":
+      return <RadioDocPage />;
+
+    case "switch":
+      return <SwitchDocPage />;
+
+    case "tooltip":
+      return <TooltipDocPage />;
+      
+    case "accordion":
+      return <AccordionDocPage />;
+      
+    case "skeleton":
+      return <SkeletonDocPage />;
+      
+    case "dialog":
+      return <DialogDocPage />;
+      
+    case "table":
+      return <TableDocPage />;
+      
+    case "dropdown":
+      return <DropdownDocPage />;
+      
+    case "input":
+      return <InputDocPage />;
+      
+    case "tabs":
+      return <TabsDocPage />;
+
+    case "pagination":
+      return <PaginationDocPage />;
+      
+    case "loader":
+      return <LoadersDocPage />;
+      
+    case "stepper":
+      return <StepperDocPage />;
+
+    case "colors":
+      return <ColorsDocPage />;
+
+    case "theming":
+      return <ThemingDocPage />;
+
+    case "getting-started":
+      return <GettingStartedDocPage />;
+      
+      
+
+  }
+
+  return (
+    <DocsPageLayout>
+      <DocsPageHeader
+        icon={item.icon}
+        title={item.title}
+        description={`Documentation for the ${item.title} component is coming soon.`}
+      />
+      <DocsSection
+        contentClassName="flex flex-col items-center gap-3 rounded-xl border border-dashed border-zinc-300 py-16 text-center dark:border-zinc-700"
+      >
+        <Construction className="h-6 w-6 text-zinc-400" />
+        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+          The {item.title} docs page is coming soon.
+        </p>
+      </DocsSection>
+    </DocsPageLayout>
+  );
+}

package/app/docs/layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { DocsTopbar } from "@/components/docs/docs-topbar";
+import { DocsSidebar } from "@/components/docs/docs-sidebar";
+import { DocsFooter } from "@/components/docs/docs-footer";
+import { DocsMobileNavProvider } from "@/components/docs/docs-mobile-nav-context";
+import { DocsMobileMenuBar } from "@/components/docs/docs-mobile-menu-bar";
+
+export default function DocsLayout({ children }: { children: ReactNode }) {
+  return (
+    <DocsMobileNavProvider>
+      <div className="docs-shell-glow relative min-h-screen bg-white dark:bg-zinc-950" id="docs-shell">
+        <DocsTopbar />
+        <DocsMobileMenuBar />
+        <div className="flex min-w-0">
+          <DocsSidebar />
+          <div className="relative z-10 min-w-0 flex-1 overflow-x-clip px-4 py-8 sm:px-10 sm:py-10 xl:px-16 2xl:px-24">
+            {children}
+            <div className="mx-auto max-w-5xl">
+              <DocsFooter />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DocsMobileNavProvider>
+  );
+}

package/app/docs/page.tsx

@@ -0,0 +1,148 @@
+import Link from "next/link";
+import { Rocket, ShieldCheck, SwatchBook, Wand2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { InstallationSection } from "@/components/installation-section";
+import { UsageSection } from "@/components/docs/usage-section";
+import { NextSteps } from "@/components/docs/next-steps";
+import { DocsPage, DocsPageHeader, DocsSection } from "@/components/docs/docs-page";
+import { DOCS_NAV } from "@/data/docs-nav";
+
+const COMPONENT_COUNT = DOCS_NAV[0].items.filter((item) => item.slug).length;
+
+export default function DocsIntroductionPage() {
+  return (
+     <DocsPage>
+      {/* --- NEW HEADER SECTION (Based on Image) --- */}
+      <div className="mb-10 space-y-3">
+        <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
+  Welcome to ruler.ui
+</h1>
+        <p className="max-w-3xl text-[16px] leading-relaxed text-zinc-600 dark:text-zinc-400">
+          ruler.ui is a collective resource of global UI design patterns and components, 
+          to help maintain a cohesive user experience across all of your products and applications.
+        </p>
+      </div>
+
+      {/* --- STATS ROW --- */}
+      <div className="mt-6 flex flex-wrap items-center gap-3">
+  {/* Component Count Badge */}
+  <div className="inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
+    <span className="mr-1 font-semibold text-zinc-900 dark:text-white">{COMPONENT_COUNT}</span> 
+    components
+  </div>
+
+  {/* TypeScript Badge */}
+  <div className="inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
+    Written in TypeScript
+  </div>
+
+  {/* Accessibility Badge */}
+  <div className="inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
+    WAI-ARIA accessible
+  </div>
+</div>
+
+      {/* --- HOW IT WORKS SECTION (Based on Image) --- */}
+      <div className="relative my-8">
+  <div className="relative overflow-hidden border rounded-md border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+    
+    {/* TOP-LEFT SLANTED ACCENT */}
+    <div
+      className="absolute left-0 top-0 h-[5px] w-24 bg-black"
+      style={{
+        clipPath: "polygon(0 0, 100% 0, 90% 100%, 0 100%)",
+      }}
+    />
+
+    {/* BOTTOM-RIGHT SLANTED ACCENT */}
+    <div
+      className="absolute bottom-0 right-0 h-[5px] w-24 bg-black"
+      style={{
+        clipPath: "polygon(10% 0, 100% 0, 100% 100%, 0 100%)",
+      }}
+    />
+
+    <div className="px-6 py-5 md:px-7 md:py-6">
+      <h2 className="mb-4 text-[16px] leading-relaxed text-zinc-600 dark:text-zinc-400">
+        How It Works
+      </h2>
+
+      <div>
+        {/* Feature 1 */}
+        <div className="pb-4">
+          <p className="text-[14px] leading-6 text-zinc-700 dark:text-zinc-300">
+            <span className="font-bold text-zinc-900 dark:text-white">
+              Simple access
+            </span>{" "}
+            to universal and reusable components & patterns available whenever
+            you need them.
+          </p>
+        </div>
+
+        <div className="border-t border-dashed border-zinc-200 dark:border-zinc-800" />
+
+        {/* Feature 2 */}
+        <div className="py-4">
+          <p className="text-[14px] leading-6 text-zinc-700 dark:text-zinc-300">
+            <span className="font-bold text-zinc-900 dark:text-white">
+              Instructions and guidance
+            </span>{" "}
+            to help you understand how elements are intended to behave, what
+            they look like and how they are coded.
+          </p>
+        </div>
+
+        <div className="border-t border-dashed border-zinc-200 dark:border-zinc-800" />
+
+        {/* Feature 3 */}
+        <div className="pt-4">
+          <p className="text-[14px] leading-6 text-zinc-700 dark:text-zinc-300">
+            {" "}
+            <span className="font-bold text-zinc-900 dark:text-white">
+              dedicated team
+            </span>{" "}
+            of designers and developers who manage the UI library and are here
+            to provide assistance when needed.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+      {/* --- ORIGINAL REMAINING SECTIONS (No changes below this) --- */}
+      <DocsSection
+        title="Explore every component"
+        description={`${COMPONENT_COUNT} components, fully typed and ready to import.`}
+      >
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+          {DOCS_NAV[0].items
+            .filter((item) => item.slug)
+            .map((item) => (
+              <Link
+                key={item.slug}
+                href={`/docs/${item.slug}`}
+                className="group flex items-center gap-3 rounded-xl border border-zinc-200 p-3.5 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/40"
+              >
+                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-500 transition-colors group-hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400 dark:group-hover:text-white">
+                  <item.icon className="h-4 w-4" />
+                </span>
+                <span className="text-sm font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-zinc-300 dark:group-hover:text-white">
+                  {item.title}
+                </span>
+              </Link>
+            ))}
+        </div>
+      </DocsSection>
+
+      <DocsSection>
+        <div className="rounded-3xl border border-zinc-200/70 bg-gradient-to-b from-zinc-50/80 to-white p-8 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800/70 dark:from-zinc-900/30 dark:to-zinc-950 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)] sm:p-12">
+          <InstallationSection as="h2" />
+        </div>
+      </DocsSection>
+
+      <UsageSection />
+      <NextSteps />
+    </DocsPage>
+  );
+}

package/app/globals.css

@@ -0,0 +1,168 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --background: #ffffff;
+  --foreground: #09090b;
+}
+
+.dark {
+  --background: #09090b;
+  --foreground: #fafafa;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-poppins), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-brand: var(--font-orbitron), var(--font-poppins), ui-sans-serif, sans-serif;
+}
+
+html {
+  overflow-x: clip;
+  max-width: 100%;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  min-width: 0;
+  max-width: 100%;
+}
+
+@layer base {
+  img {
+    max-width: 100%;
+  }
+}
+
+@layer utilities {
+  .docs-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(161 161 170 / 0.35) transparent;
+  }
+
+  .docs-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .docs-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .docs-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgb(161 161 170 / 0.35);
+    border-radius: 9999px;
+  }
+
+  .docs-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(161 161 170 / 0.55);
+  }
+
+  .docs-shell-glow {
+    background-image:
+      radial-gradient(circle 620px at 12% -10%, rgb(0 0 0 / 0.05), transparent 60%),
+      radial-gradient(circle 560px at 100% 0%, rgb(0 0 0 / 0.035), transparent 55%);
+  }
+
+  .dark .docs-shell-glow {
+    background-image:
+      radial-gradient(circle 620px at 12% -10%, rgb(255 255 255 / 0.05), transparent 60%),
+      radial-gradient(circle 560px at 100% 0%, rgb(255 255 255 / 0.03), transparent 55%);
+  }
+
+  .hero-spotlight-grid {
+    background-image:
+      linear-gradient(to right, rgb(255 255 255 / 0.3) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(255 255 255 / 0.3) 1px, transparent 1px);
+    background-size: 40px 40px;
+    opacity: 0;
+    will-change: mask-position, opacity;
+    -webkit-mask-image: radial-gradient(circle 280px at 280px 280px, black, transparent 72%);
+    mask-image: radial-gradient(circle 280px at 280px 280px, black, transparent 72%);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 560px 560px;
+    mask-size: 560px 560px;
+    -webkit-mask-position: var(--mask-x, calc(50% - 280px)) var(--mask-y, -280px);
+    mask-position: var(--mask-x, calc(50% - 280px)) var(--mask-y, -280px);
+    transition:
+      opacity 800ms ease,
+      -webkit-mask-position 900ms cubic-bezier(0.16, 1, 0.3, 1),
+      mask-position 900ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .hero-spotlight-grid.is-active {
+    opacity: 1;
+  }
+
+  /* Fluid type scale — smooth clamp() growth instead of hard breakpoint jumps */
+  .text-fluid-h1 {
+    font-size: clamp(2.25rem, 1.7rem + 2vw, 3.75rem);
+    line-height: 1.1;
+  }
+
+  .text-fluid-h2 {
+    font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
+    line-height: 1.15;
+  }
+
+  .hero-particle {
+    position: absolute;
+    margin: -2px;
+    border-radius: 9999px;
+    background: white;
+    filter: blur(0.3px);
+    pointer-events: none;
+    opacity: 0;
+    animation: hero-particle-drift var(--dur, 2200ms) ease-out forwards;
+  }
+}
+
+@keyframes hero-particle-drift {
+  0% {
+    transform: translate(0, 0);
+    opacity: 0;
+  }
+  15% {
+    opacity: var(--peak-opacity, 0.7);
+  }
+  50% {
+    transform: translate(var(--dx1, 10px), var(--dy1, 20px));
+  }
+  100% {
+    transform: translate(var(--dx2, 15px), var(--dy2, 60px));
+    opacity: 0;
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+@keyframes pagination-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+::view-transition-group(*) {
+  animation-duration: 220ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+

package/app/layout.tsx

@@ -0,0 +1,90 @@
+import type { Metadata, Viewport } from "next";
+import { cookies } from "next/headers";
+import { Geist_Mono, Orbitron, Poppins } from "next/font/google";
+import { ThemeProvider } from "@/components/theme-provider";
+import { parseTheme, THEME_COOKIE_KEY } from "@/lib/theme";
+import "./globals.css";
+
+const poppins = Poppins({
+  variable: "--font-poppins",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const orbitron = Orbitron({
+  variable: "--font-orbitron",
+  subsets: ["latin"],
+  weight: ["600", "700"],
+});
+
+const SITE_URL = "https://ruler-ui.vercel.app";
+const SITE_TITLE = "Ruler.ui";
+const SITE_DESCRIPTION =
+  "A sharper way to build interfaces. Precision-crafted React components for modern products.";
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 5,
+  viewportFit: "cover",
+};
+
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: SITE_TITLE,
+    template: `%s · ${SITE_TITLE}`,
+  },
+  description: SITE_DESCRIPTION,
+  openGraph: {
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    url: SITE_URL,
+    siteName: SITE_TITLE,
+    type: "website",
+    images: [
+      {
+        url: "/opengraph-image",
+        width: 1200,
+        height: 630,
+        alt: "Ruler.ui — A sharper way to build interfaces.",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    images: ["/twitter-image"],
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cookieStore = await cookies();
+  const theme = parseTheme(cookieStore.get(THEME_COOKIE_KEY)?.value);
+  const isDark = theme === "dark";
+
+  return (
+    <html
+      lang="en"
+      className={`${poppins.variable} ${geistMono.variable} ${orbitron.variable} max-w-full antialiased${isDark ? " dark" : ""}`}
+      suppressHydrationWarning
+    >
+      <body
+        className="min-h-dvh min-w-0 max-w-full bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50"
+        suppressHydrationWarning
+      >
+        <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/app/opengraph-image.tsx

@@ -0,0 +1,10 @@
+import { createOgImage, ogAlt, ogSize } from "@/lib/og-image";
+
+export const runtime = "nodejs";
+export const alt = ogAlt;
+export const size = ogSize;
+export const contentType = "image/png";
+
+export default async function Image() {
+  return createOgImage();
+}