{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-demo",
  "type": "registry:component",
  "title": "Section example",
  "description": "Usage example (demo) for Section: the code behind the preview on https://facadeui.dev/components/section. Installs the items it uses.",
  "categories": [
    "example"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json"
  ],
  "files": [
    {
      "path": "section.tsx",
      "type": "registry:component",
      "target": "components/examples/section-demo.tsx",
      "content": "import { Container } from \"@/components/ui/container\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\n\nexport function Demo() {\n  return (\n    <Section\n      spacing=\"sm\"\n      labelledBy=\"facade-a-named-band\"\n      className=\"bg-muted/40 rounded-xl\"\n    >\n      <Container size=\"md\">\n        <SectionHeader\n          eyebrow=\"Structure\"\n          title=\"A named band\"\n          description=\"Section pairs aria-labelledby with the id SectionHeader puts on the heading, so it becomes a real landmark instead of an unnamed region.\"\n        />\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Example only: components/examples/section-demo.tsx renders Section with sample content from components/examples/content.tsx. Copy what you need into your page. Docs: https://facadeui.dev/components/section"
}