{
  "name": "stack-side-demo",
  "type": "registry:example",
  "registryDependencies": [
    "stack"
  ],
  "files": [
    {
      "path": "examples/stack-side-demo.tsx",
      "type": "registry:example",
      "content": "import { Stack, StackItem } from \"@/registry/bases/radix/ui/stack\";\n\nexport default function StackSideDemo() {\n  return (\n    <div className=\"grid grid-cols-2 gap-8\">\n      <Stack className=\"w-[300px]\" expandOnHover side=\"top\">\n        <StackItem className=\"flex flex-col gap-2\">\n          <h3 className=\"font-semibold\">Top Stack</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Items stack toward the top\n          </p>\n        </StackItem>\n        <StackItem className=\"flex flex-col gap-2\">\n          <h3 className=\"font-semibold\">Item 2</h3>\n          <p className=\"text-sm text-muted-foreground\">Behind the first</p>\n        </StackItem>\n        <StackItem className=\"flex flex-col gap-2\">\n          <h3 className=\"font-semibold\">Item 3</h3>\n          <p className=\"text-sm text-muted-foreground\">Behind the second</p>\n        </StackItem>\n      </Stack>\n      <Stack className=\"w-[300px]\" expandOnHover side=\"bottom\">\n        <StackItem className=\"flex flex-col gap-2\">\n          <h3 className=\"font-semibold\">Bottom Stack</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Items stack toward the bottom\n          </p>\n        </StackItem>\n        <StackItem className=\"flex flex-col gap-2\">\n          <h3 className=\"font-semibold\">Item 2</h3>\n          <p className=\"text-sm text-muted-foreground\">Behind the first</p>\n        </StackItem>\n        <StackItem className=\"flex flex-col gap-2\">\n          <h3 className=\"font-semibold\">Item 3</h3>\n          <p className=\"text-sm text-muted-foreground\">Behind the second</p>\n        </StackItem>\n      </Stack>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}