{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heading-demo",
  "type": "registry:component",
  "title": "Heading example",
  "description": "Usage example (demo) for Heading: the code behind the preview on https://facadeui.dev/components/heading. Installs the items it uses.",
  "categories": [
    "example"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/heading.json"
  ],
  "files": [
    {
      "path": "heading.tsx",
      "type": "registry:component",
      "target": "components/examples/heading-demo.tsx",
      "content": "import { Heading } from \"@/components/ui/heading\"\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {/* Same visual size, four different outline levels. */}\n      <Heading level={2} className=\"text-display-sm font-semibold\">\n        Rendered as h2\n      </Heading>\n      <Heading level={3} className=\"text-display-sm font-semibold\">\n        Rendered as h3\n      </Heading>\n      <Heading level={4} className=\"text-display-sm font-semibold\">\n        Rendered as h4\n      </Heading>\n      <p className=\"text-muted-foreground text-sm\">\n        Visual size is a class. The outline level is the <code>level</code> prop. Changing\n        one never changes the other.\n      </p>\n    </div>\n  )\n}\n"
    }
  ],
  "docs": "Example only: components/examples/heading-demo.tsx renders Heading with sample content from components/examples/content.tsx. Copy what you need into your page. Docs: https://facadeui.dev/components/heading"
}