{"_id":"@allem-ui/kanban","_rev":"3-079c5466cda47fc6d18d9cda5ff08e0e","name":"@allem-ui/kanban","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@allem-ui/kanban","version":"0.0.1","keywords":["allem-ui","kanban","board","drag-and-drop","project-management","react","components"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/kanban@0.0.1","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"b0f86802fef823d6107457f5fa4945a1cabf5bd3","tarball":"https://registry.npmjs.org/@allem-ui/kanban/-/kanban-0.0.1.tgz","fileCount":7,"integrity":"sha512-l+V6+VgdR796EZ/qTxa76r7ly61dHz5cGUMNrFOn1hl7QHUMKdnPaVICEdTUE6LD/UR8fMvijt7uDgqTJJJscg==","signatures":[{"sig":"MEUCIQDxdlwFD/48yGXQdIV4HMqeBiiM6nGhcWguHcQ+i4bVCQIgIobTMuur+YXja/KaZoWmvFzThRvb0QNubyY+fHET7YM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48474},"main":"./dist/index.js","_from":"file:allem-ui-kanban-0.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/d6b12a9b50c43891c60efb70fdcdd2e3/allem-ui-kanban-0.0.1.tgz","_integrity":"sha512-l+V6+VgdR796EZ/qTxa76r7ly61dHz5cGUMNrFOn1hl7QHUMKdnPaVICEdTUE6LD/UR8fMvijt7uDgqTJJJscg==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/kanban"},"_npmVersion":"11.12.1","description":"Kanban board components with drag-and-drop for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.8.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/kanban_0.0.1_1779396104953_0.20699369130414036","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@allem-ui/kanban","version":"0.0.2","keywords":["allem-ui","kanban","board","drag-and-drop","project-management","react","components"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/kanban@0.0.2","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"889cc4fa5c7a86d91066f2b217278f0711728248","tarball":"https://registry.npmjs.org/@allem-ui/kanban/-/kanban-0.0.2.tgz","fileCount":8,"integrity":"sha512-WRuTDP9qv/hoq5V2UZmtx6PvTA8OO/WpiPCHRMsVpiux6iY8WSqeDjFjGztDEpISAkHULrtN6sIGQZS0FL2Z3A==","signatures":[{"sig":"MEUCIQDadHUHE6BPXtPZPvpBs8y1nX9SkM+8hb0ntrWuCuFJLAIgB8w+MgLR4KPFfktBs20tHuvnk3tL5K0aCUSOZIP7ltA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51422},"main":"./dist/index.js","_from":"file:allem-ui-kanban-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/3389c3707b2179c978121a9d17f15614/allem-ui-kanban-0.0.2.tgz","_integrity":"sha512-WRuTDP9qv/hoq5V2UZmtx6PvTA8OO/WpiPCHRMsVpiux6iY8WSqeDjFjGztDEpISAkHULrtN6sIGQZS0FL2Z3A==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/kanban"},"_npmVersion":"11.12.1","description":"Kanban board components with drag-and-drop for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/kanban_0.0.2_1779493519054_0.6070042305127388","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@allem-ui/kanban","version":"0.0.3","description":"Kanban board components with drag-and-drop for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/kanban"},"keywords":["allem-ui","kanban","board","drag-and-drop","project-management","react","components"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/kanban@0.0.3","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-PCyf3Zb8OBGGm17wYLeylAvU+g9lvmEm7wGFqdkybZHcgiY3aeHTYnj5ln8YbFo/uePPjyCYjXag4XfHAEulAg==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/6ab6d5ea371851b6491679a486267b92/allem-ui-kanban-0.0.3.tgz","_from":"file:allem-ui-kanban-0.0.3.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-PCyf3Zb8OBGGm17wYLeylAvU+g9lvmEm7wGFqdkybZHcgiY3aeHTYnj5ln8YbFo/uePPjyCYjXag4XfHAEulAg==","shasum":"1a1f135e8dba3a8f027cf43c17c051c4fec560fc","tarball":"https://registry.npmjs.org/@allem-ui/kanban/-/kanban-0.0.3.tgz","fileCount":8,"unpackedSize":51869,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDzau+B522+KhQZyoY/uwoWUfrK942be7DH90YPSL/0EwIhALiWqN6Xg/CcxtqQ9v9H462XCnJBuxo6sQJlRsw3Qj0y"}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kanban_0.0.3_1779581028564_0.16095199154385154"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T20:41:44.837Z","modified":"2026-05-24T00:03:48.849Z","0.0.1":"2026-05-21T20:41:45.099Z","0.0.2":"2026-05-22T23:45:19.225Z","0.0.3":"2026-05-24T00:03:48.702Z"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"license":"MIT","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","kanban","board","drag-and-drop","project-management","react","components"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/kanban"},"description":"Kanban board components with drag-and-drop for Allem UI","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"readme":"

\n \"Allem\n

\n\n

\n \"npm\n \"License\"\n \"React\n \"Tailwind\n \"TypeScript\"\n

\n\n# @allem-ui/kanban\n\nDrag-and-drop kanban board components for Allem UI -- columns, cards, and headers for project management interfaces.\n\n## Installation\n\n```bash\nnpm install @allem-ui/kanban @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/kanban\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport {\n KanbanBoard,\n KanbanColumn,\n KanbanCard,\n KanbanHeader,\n KanbanAddCard,\n} from \"@allem-ui/kanban\";\n\nexport function ProjectBoard() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n## Components\n\n| Component | Description |\n|-----------|-------------|\n| `KanbanBoard` | Top-level board container with drag-and-drop context |\n| `KanbanColumn` | Vertical column that holds cards |\n| `KanbanCard` | Draggable task card |\n| `KanbanHeader` | Column header with title and card count |\n| `KanbanAddCard` | Button/form to add a new card to a column |\n\n## Features\n\n- **Drag and drop** -- Move cards between columns with smooth animations\n- **Composable** -- Build custom board layouts with individual components\n- **Column headers** -- Built-in card count and column actions\n- **Add cards** -- Inline card creation component\n- **Dark mode** -- First-class dark mode with `dark:` Tailwind prefix\n- **TypeScript strict** -- Full type safety with exported prop and data types\n- **Tree-shakeable** -- ESM + CJS builds, import only what you use\n\n## Part of Allem UI\n\nThis is a standalone package in the [Allem UI](https://github.com/kingofmit/allem-ui) monorepo. For core components, see [`@allem-ui/react`](https://www.npmjs.com/package/@allem-ui/react).\n\n## Support\n\nIf you find Allem UI useful, consider supporting its development:\n\n\"Buy\n\n## License\n\n[MIT](https://github.com/kingofmit/allem-ui/blob/main/LICENSE) - [Ahmed Allem](https://kingallem.com)\n","readmeFilename":"README.md"}