{
  "name": "sortable-primitive-values-demo",
  "type": "registry:example",
  "dependencies": [
    "@dnd-kit/core",
    "@dnd-kit/modifiers",
    "@dnd-kit/sortable",
    "@dnd-kit/utilities",
    "lucide-react"
  ],
  "registryDependencies": [
    "sortable"
  ],
  "files": [
    {
      "path": "examples/sortable-primitive-values-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Sortable,\n  SortableContent,\n  SortableItem,\n  SortableOverlay,\n} from \"@/registry/bases/radix/ui/sortable\";\n\nexport default function SortablePrimitiveValuesDemo() {\n  const [tricks, setTricks] = React.useState([\n    \"The 900\",\n    \"Indy Backflip\",\n    \"Pizza Guy\",\n    \"Rocket Air\",\n    \"Kickflip Backflip\",\n    \"FS 540\",\n  ]);\n\n  return (\n    <Sortable value={tricks} onValueChange={setTricks} orientation=\"mixed\">\n      <SortableContent className=\"grid grid-cols-3 gap-2.5\">\n        {tricks.map((trick) => (\n          <SortableItem key={trick} value={trick} asChild asHandle>\n            <div className=\"flex size-full flex-col items-center justify-center rounded-md border border-zinc-200 bg-zinc-100 p-8 text-center shadow-xs dark:border-zinc-800 dark:bg-zinc-900\">\n              <div className=\"text-sm leading-tight font-medium sm:text-base\">\n                {trick}\n              </div>\n            </div>\n          </SortableItem>\n        ))}\n      </SortableContent>\n      <SortableOverlay>\n        {(activeItem) => (\n          <SortableItem value={activeItem.value} asChild>\n            <div className=\"flex size-full flex-col items-center justify-center rounded-md border border-zinc-200 bg-zinc-100 p-8 text-center shadow-xs dark:border-zinc-800 dark:bg-zinc-900\">\n              <div className=\"text-sm leading-tight font-medium sm:text-base\">\n                {activeItem.value}\n              </div>\n            </div>\n          </SortableItem>\n        )}\n      </SortableOverlay>\n    </Sortable>\n  );\n}\n",
      "target": ""
    }
  ]
}