{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "docs-site-demo",
  "type": "registry:component",
  "title": "Documentation page example",
  "description": "Usage example (demo) for Documentation page: the code behind the preview on https://facadeui.dev/components/docs-site. Installs the items it uses.",
  "categories": [
    "example"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/docs-site.json",
    "https://facadeui.dev/r/examples-content.json"
  ],
  "files": [
    {
      "path": "docs-site.tsx",
      "type": "registry:component",
      "target": "components/examples/docs-site-demo.tsx",
      "content": "import { DocsSite } from \"@/components/templates/docs-site\"\n\nimport { DOCS_GROUPS, FOOTER_GROUPS, NAV_ITEMS } from \"./content\"\n\nexport function Demo() {\n  return (\n    <div className=\"-m-6 sm:-m-10\">\n      <DocsSite\n        currentPath=\"#installation\"\n        content={{\n          brand: \"Facade UI\",\n          nav: NAV_ITEMS,\n          navActions: [{ label: \"Get started\", href: \"#start\" }],\n          sidebar: { label: \"Documentation\", groups: DOCS_GROUPS },\n          page: {\n            eyebrow: \"Getting started\",\n            title: \"Installation\",\n            description: \"Add the tokens once, then install sections one at a time.\",\n            lastUpdated: { dateTime: \"2026-09-21\", label: \"21 September 2026\" },\n          },\n          toc: {\n            items: [\n              { label: \"Requirements\", href: \"#requirements\" },\n              {\n                label: \"Install the tokens\",\n                href: \"#tokens\",\n                children: [{ label: \"Import the stylesheet\", href: \"#import\" }],\n              },\n              { label: \"Add a section\", href: \"#section\" },\n            ],\n          },\n          pagination: {\n            prev: { label: \"Introduction\", href: \"#introduction\" },\n            next: { label: \"Theming\", href: \"#theming\" },\n          },\n          footer: { groups: FOOTER_GROUPS, copyright: \"© 2026 Facade UI contributors\" },\n        }}\n      >\n        <h2 id=\"requirements\">Requirements</h2>\n        <ul>\n          <li>React 19 and Tailwind CSS v4</li>\n          <li>\n            A project set up with <code>shadcn init</code>\n          </li>\n        </ul>\n        <h2 id=\"tokens\">Install the tokens</h2>\n        <p>Every section reads the same tokens, so they come first.</p>\n        <pre>\n          <code>npx shadcn@latest add @facade/tokens</code>\n        </pre>\n        <h3 id=\"import\">Import the stylesheet</h3>\n        <p>\n          Import the file after Tailwind in your global stylesheet, so the tokens can\n          override its defaults.\n        </p>\n        <pre>\n          <code>@import &quot;./facade-tokens.css&quot;;</code>\n        </pre>\n        <h2 id=\"section\">Add a section</h2>\n        <p>\n          Install any section by name. Its dependencies come with it, and the source lands\n          in your project.\n        </p>\n      </DocsSite>\n    </div>\n  )\n}\n"
    }
  ],
  "docs": "Example only: components/examples/docs-site-demo.tsx renders Documentation page with sample content from components/examples/content.tsx. Copy what you need into your page. Docs: https://facadeui.dev/components/docs-site"
}