https://github.com/techwithty/kanban
Self-contained Kanban board module (Zustand store, DnD Kit, mocks, UI integration). Production-ready for submodule reuse.
https://github.com/techwithty/kanban
component dnd kanban react typescript ui zustand
Last synced: 6 months ago
JSON representation
Self-contained Kanban board module (Zustand store, DnD Kit, mocks, UI integration). Production-ready for submodule reuse.
- Host: GitHub
- URL: https://github.com/techwithty/kanban
- Owner: TechWithTy
- Created: 2025-08-19T05:52:19.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-08-27T02:18:15.000Z (7 months ago)
- Last Synced: 2025-08-27T09:00:47.879Z (7 months ago)
- Topics: component, dnd, kanban, react, typescript, ui, zustand
- Language: TypeScript
- Homepage: https://www.cybershoptech.com
- Size: 103 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# External Kanban Module
A self-contained Kanban module that lives entirely under `external/kanban/`.
- Local types: `./types.ts`
- Local mocks: `./mocks.ts`
- Local store (Zustand): `./store.ts`
- Local utils: `./utils.ts`
- Components: `KanbanBoard`, `BoardColumn`, `TaskCard`, `ColumnActions`, `NewSectionDialog`
- New Task UI: `NewTaskDialog` + components in `./new-task-dialog/`
- Barrel export: `./index.ts`
UI , components are expected from your existing shadcn setup (`@/components/ui/*`). No other imports reference outside the `external/` folder.
## Install peer dependencies
This module uses the following libraries from your app:
- @dnd-kit/core
- @dnd-kit/sortable
- @dnd-kit/utilities
- class-variance-authority
- lucide-react
- zustand
- uuid
Ensure they are installed in your project.
## Usage
```tsx
import { KanbanBoard, NewTaskDialog } from "@/external/kanban";
export default function Page() {
return (
);
}
```
## Notes
- The store (`useTaskStore`) is persisted under the key `external-task-store`.
- `mocks.ts` provides simple team members, leads, and lead lists for demo purposes.
- You can replace mocks with real data sources by extending the store/actions as needed.