Kinfe123 · farming-labs-docs · Apr 21, 2026
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@farming-labs/theme/colorful/css";
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { RootProvider } from "@farming-labs/theme";
+import docsConfig from "../docs.config";
+import "./global.css";
+
+const geistSans = Geist({
+  variable: "--fd-font-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--fd-font-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "Docs",
+    template: docsConfig.metadata?.titleTemplate ?? "%s",
+  },
+  description: docsConfig.metadata?.description,
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+const title = "Better Auth UI";
+const description = "Better Auth UI is a beautiful and compatible user interface designed to enhance the authentication experience in your applications using Better Auth as your authentication library , providing you a set of pre built UI components that you can easily copy and paste to kickstart your project.";
+
+export default function HomePage() {
+  return (
+    <main style={{ padding: 32 }}>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <Link href="/docs">Open docs</Link>
+    </main>
+  );
+}
diff --git a/apps/docs/docs.config.tsx b/apps/docs/docs.config.tsx
@@ -0,0 +1,187 @@
+import { defineDocs } from "@farming-labs/docs";
+import { colorful } from "@farming-labs/theme/colorful";
+
+export default defineDocs({
+  entry: "docs",
+  theme: colorful(),
+  ordering: [
+    {
+      "slug": "quickstart"
+    },
+    {
+      "slug": "installation"
+    },
+    {
+      "slug": "features",
+      "children": [
+        {
+          "slug": "session-management"
+        }
+      ]
+    },
+    {
+      "slug": "configuration",
+      "children": [
+        {
+          "slug": "database"
+        },
+        {
+          "slug": "environment"
+        }
+      ]
+    },
+    {
+      "slug": "api",
+      "children": [
+        {
+          "slug": "config",
+          "children": [
+            {
+              "slug": "events-config"
+            },
+            {
+              "slug": "metadata-config"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "slug": "builder",
+      "children": [
+        {
+          "slug": "components"
+        },
+        {
+          "slug": "page"
+        }
+      ]
+    },
+    {
+      "slug": "components",
+      "children": [
+        {
+          "slug": "bottom-toolbar"
+        },
+        {
+          "slug": "codeblock"
+        },
+        {
+          "slug": "command-menu"
+        },
+        {
+          "slug": "command-palette-context"
+        },
+        {
+          "slug": "component-code"
+        },
+        {
+          "slug": "component-display"
+        },
+        {
+          "slug": "component-preview"
+        },
+        {
+          "slug": "component-render"
+        },
+        {
+          "slug": "credentail"
+        },
+        {
+          "slug": "element-render"
+        },
+        {
+          "slug": "element-strucuture"
+        },
+        {
+          "slug": "file-tree"
+        },
+        {
+          "slug": "grid-credential-social"
+        },
+        {
+          "slug": "icons"
+        },
+        {
+          "slug": "landing"
+        },
+        {
+          "slug": "logo"
+        },
+        {
+          "slug": "navbar"
+        },
+        {
+          "slug": "navlink"
+        },
+        {
+          "slug": "provider"
+        },
+        {
+          "slug": "sign-in"
+        },
+        {
+          "slug": "tab-context"
+        },
+        {
+          "slug": "theme-toggler"
+        },
+        {
+          "slug": "ui"
+        }
+      ]
+    },
+    {
+      "slug": "hints"
+    },
+    {
+      "slug": "page"
+    },
+    {
+      "slug": "parser",
+      "children": [
+        {
+          "slug": "next"
+        }
+      ]
+    },
+    {
+      "slug": "r",
+      "children": [
+        {
+          "slug": "registry"
+        }
+      ]
+    },
+    {
+      "slug": "store"
+    },
+    {
+      "slug": "templates",
+      "children": [
+        {
+          "slug": "file"
+        },
+        {
+          "slug": "server-client-dep"
+        },
+        {
+          "slug": "state"
+        },
+        {
+          "slug": "token-map"
+        },
+        {
+          "slug": "two-level"
+        },
+        {
+          "slug": "ui-function-dep"
+        }
+      ]
+    }
+  ],
+  metadata: {
+    titleTemplate: "%s – Docs",
+    description: "Generated by @farming-labs/docs Cloud",
+  },
+});
diff --git a/apps/docs/docs/api/config/events-config/page.mdx b/apps/docs/docs/api/config/events-config/page.mdx
@@ -0,0 +1,63 @@
+---
+title: "Events Config"
+description: "The source includes types or helpers for events config."
+order: 100
+---
+
+# Events Config
+
+The source includes types or helpers for events config.
+## What This Is
+This API reference page explains the events config shape, how developers pass it to the package, and which related feature pages depend on those settings.
+## Why It Matters
+Events Config matters because it is part of how Better Auth UI turns repository behavior into a usable developer or operator workflow. This page gives readers the mental model first, then uses implementation evidence as supporting context.
+## Core Concepts
+- Events Config
+- configuration type
+- runtime options
+- validation
+## Typical Workflow
+1. Locate the configuration object in the host application.
+2. Set only the options needed for the selected runtime and feature set.
+3. Use the related feature docs to understand behavior controlled by each option.
+## Detailed API Contract
+Events Config is a developer contract, not just an exported name. The page explains what the API represents, what problem it solves, what a caller provides, what the package returns or performs, and how it relates to the surrounding runtime.
+
+API pages are most useful when they explain the shape of responsibility. For an adapter, that means the host framework owns routing and the package supplies a handler. For configuration, it means the host app supplies options and the package changes runtime behavior. For utilities, it means the function supports a feature that needs to be understood before the utility is changed.
+
+## Integration Questions
+- What does the caller provide?
+- What does the package create, mutate, or return?
+- Which feature or configuration page explains the user-facing behavior behind this API?
+- What needs to be tested after this API changes?
+
+## Success Criteria
+- Readers understand the API purpose before looking at source files.
+- Readers know whether the API is public integration surface or internal support code.
+- Readers know which runtime or feature depends on it.
+## Import Surface
+Use `ui-better-auth` as the package path indicated by package metadata or adapter file evidence.
+## API Mental Model
+Configuration APIs are the contract between the host application and the product runtime. The important details are what each option changes and which feature depends on it.
+## Related Exports
+- `ThemeProvider`
+## Operational Notes
+- The concept comes before the file paths, so readers understand the workflow before they inspect implementation evidence.
+- Examples stay grounded in detected commands, config names, import paths, or behavior from the repository.
+- Maintainer details live in the reference section so the main page stays useful to product readers.
+- Inputs, outputs, side effects, and ownership boundaries are described before exported names.
+- The API connects back to feature or configuration pages that explain user-facing behavior.
+## Maintainer Reference
+The sections above are the reader-facing explanation. The references below are for maintainers who need to verify or update the implementation behind this page.
+
+### Implementation Map
+- `components/provider.tsx` - Evidence file that contributes to the implementation understanding for this page.
+
+### Knowledge Chunks
+- `components/provider.tsx:1-9` - ThemeProvider (source; TypeScript; module components/provider; symbols ThemeProvider). 'use client' import as React from "react"; import { ThemeProvider as NextThemesProvider } from "next themes"; import { type ThemeProviderProps } from "next themes/dist/types"; export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} ; }
+
+### Source Details
+- `components/provider.tsx`: language TypeScript; exports `ThemeProvider`
+
+### Evidence
+- `components/provider.tsx`
diff --git a/apps/docs/docs/api/config/metadata-config/page.mdx b/apps/docs/docs/api/config/metadata-config/page.mdx
@@ -0,0 +1,69 @@
+---
+title: "Metadata Config"
+description: "The source includes types or helpers for metadata config."
+order: 110
+---
+
+# Metadata Config
+
+The source includes types or helpers for metadata config.
+## What This Is
+This API reference page explains the metadata config shape, how developers pass it to the package, and which related feature pages depend on those settings.
+## Why It Matters
+Metadata Config matters because it is part of how Better Auth UI turns repository behavior into a usable developer or operator workflow. This page gives readers the mental model first, then uses implementation evidence as supporting context.
+## Core Concepts
+- Metadata Config
+- configuration type
+- runtime options
+- validation
+## Typical Workflow
+1. Locate the configuration object in the host application.
+2. Set only the options needed for the selected runtime and feature set.
+3. Use the related feature docs to understand behavior controlled by each option.
+## Detailed API Contract
+Metadata Config is a developer contract, not just an exported name. The page explains what the API represents, what problem it solves, what a caller provides, what the package returns or performs, and how it relates to the surrounding runtime.
+
+API pages are most useful when they explain the shape of responsibility. For an adapter, that means the host framework owns routing and the package supplies a handler. For configuration, it means the host app supplies options and the package changes runtime behavior. For utilities, it means the function supports a feature that needs to be understood before the utility is changed.
+
+## Integration Questions
+- What does the caller provide?
+- What does the package create, mutate, or return?
+- Which feature or configuration page explains the user-facing behavior behind this API?
+- What needs to be tested after this API changes?
+
+## Success Criteria
+- Readers understand the API purpose before looking at source files.
+- Readers know whether the API is public integration surface or internal support code.
+- Readers know which runtime or feature depends on it.
+## Import Surface
+Use `ui-better-auth` as the package path indicated by package metadata or adapter file evidence.
+## API Mental Model
+Configuration APIs are the contract between the host application and the product runtime. The important details are what each option changes and which feature depends on it.
+## Related Exports
+- `metadata`
+- `MobileThemeToggle`
+- `ThemeToggle`
+## Operational Notes
+- The concept comes before the file paths, so readers understand the workflow before they inspect implementation evidence.
+- Examples stay grounded in detected commands, config names, import paths, or behavior from the repository.
+- Maintainer details live in the reference section so the main page stays useful to product readers.
+- Inputs, outputs, side effects, and ownership boundaries are described before exported names.
+- The API connects back to feature or configuration pages that explain user-facing behavior.
+## Maintainer Reference
+The sections above are the reader-facing explanation. The references below are for maintainers who need to verify or update the implementation behind this page.
+
+### Implementation Map
+- `app/metadata.ts` - Evidence file that contributes to the implementation understanding for this page.
+- `components/theme-toggler.tsx` - Evidence file that contributes to the implementation understanding for this page.
+
+### Knowledge Chunks
+- `app/metadata.ts:1-22` - metadata (source; TypeScript; module metadata; symbols metadata). // app/metadata.ts import type { Metadata } from "next"; import { metadata as mt } from "@/meta"; const { title, description, ogImage } = mt; export const metadata: Metadata = { title, description, openGraph: { title, description, images: [{ url: ogImage }], url: "https://better auth.farmui.com", }, twitter: { card: "summary large image", title, description, images: [ogImage], creator: "@kinfishT", }, };
+- `components/theme-toggler.tsx:1-60` - MobileThemeToggle, ThemeToggle (source; TypeScript; module components/theme-toggler; symbols MobileThemeToggle, ThemeToggle). "use client"; import { Moon, Sun } from "lucide react"; import { useTheme } from "next themes"; import as React from "react"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown menu"; export function ThemeToggle() { const { setTheme } = useTheme(); return ( Toggle theme setTheme("light")} Light setTheme("
+
+### Source Details
+- `app/metadata.ts`: language TypeScript; exports `metadata`
+- `components/theme-toggler.tsx`: language TypeScript; exports `MobileThemeToggle`, `ThemeToggle`
+
+### Evidence
+- `app/metadata.ts`
+- `components/theme-toggler.tsx`
diff --git a/apps/docs/docs/api/config/page.mdx b/apps/docs/docs/api/config/page.mdx
@@ -0,0 +1,19 @@
+---
+title: "Configuration API"
+description: "Configuration type and helper references generated from source evidence."
+order: 90
+---
+
+# Configuration API
+
+Configuration type and helper references generated from source evidence.
+
+## How This Section Was Built
+This sidebar section is generated from repository evidence, not from a static template. The docs engine adds a section only when one or more child pages are backed by code, config, README, package export, route, CLI, or environment evidence.
+
+## Pages
+- [Events Config](/docs/api/config/events-config) - The source includes types or helpers for events config.
+- [Metadata Config](/docs/api/config/metadata-config) - The source includes types or helpers for metadata config.
+
+## Evidence Used
+- `components/provider.tsx`
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "tailwindcss";
		@import "@farming-labs/theme/colorful/css";