Kanban 1 - Drag-and-drop board with add card
A three-column kanban board where cards can be dragged between columns or nudged with move buttons, plus an inline form to add new cards. Use it for task boards, content pipelines or lightweight project tracking pages.
About Kanban 1
A three-column kanban board where cards can be dragged between columns or nudged with move buttons, plus an inline form to add new cards. Use it for task boards, content pipelines or lightweight project tracking pages.
Kanban 1 is a free kanban block for React, built on shadcn/ui and Tailwind CSS. It ships as 164 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- kanban
- drag and drop
- board
- tasks
- project management
- interactive
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/kanban-01Dependencies installed automatically: lucide-react.
Uses: badge, button, input, reveal, utils.
Usage
import Kanban01 from "@/components/blocks/kanban-01"
export default function Page() {
return <Kanban01 />
}