{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prose-demo",
  "type": "registry:component",
  "title": "Prose example",
  "description": "Usage example (demo) for Prose: the code behind the preview on https://facadeui.dev/components/prose. Installs the items it uses.",
  "categories": [
    "example"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/prose.json"
  ],
  "files": [
    {
      "path": "prose.tsx",
      "type": "registry:component",
      "target": "components/examples/prose-demo.tsx",
      "content": "import { Prose } from \"@/components/ui/prose\"\n\nexport function Demo() {\n  return (\n    <Prose className=\"max-w-2xl\">\n      <h2>Install the tokens</h2>\n      <p>\n        Every section reads the same design tokens. Add them once, then import the file in\n        your global stylesheet. See <a href=\"#theming\">theming</a> for the presets.\n      </p>\n      {/* Focusable, because it scrolls sideways on a narrow screen. */}\n      <pre tabIndex={0} role=\"region\" aria-label=\"Install command\">\n        <code>npx shadcn@latest add @facade/tokens</code>\n      </pre>\n      <h3>What you get</h3>\n      <ul>\n        <li>\n          shadcn colour names, so <code>bg-primary</code> means what it always did\n        </li>\n        <li>Display sizes, section spacing and motion timings</li>\n      </ul>\n      <blockquote>\n        <p>A token that fails contrast fails the build, not the visitor.</p>\n      </blockquote>\n      <table>\n        <thead>\n          <tr>\n            <th>Token</th>\n            <th>Used for</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>\n              <code>--input</code>\n            </td>\n            <td>Field borders, at 3:1 or better</td>\n          </tr>\n          <tr>\n            <td>\n              <code>--ring</code>\n            </td>\n            <td>The focus ring</td>\n          </tr>\n        </tbody>\n      </table>\n    </Prose>\n  )\n}\n"
    }
  ],
  "docs": "Example only: components/examples/prose-demo.tsx renders Prose with sample content from components/examples/content.tsx. Copy what you need into your page. Docs: https://facadeui.dev/components/prose"
}