# Kanban Standard 1 - Basic kanban board

> Three-column kanban board with draggable cards.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/kanban-kanban-standard-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/kanban-kanban-standard-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/kanban-kanban-standard-1-light-13461bef29aa8321.png
- Registry item: https://shadcnblocks.com/r/kanban-kanban-standard-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/kanban-kanban-standard-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://www.kibo-ui.com/r/kanban.json`

## Files

### `example/kanban/kanban-standard-1.tsx`

```tsx
"use client";

import * as React from "react";

import {
  KanbanBoard,
  KanbanCard,
  KanbanCards,
  KanbanHeader,
  KanbanProvider,
} from "@/components/kibo-ui/kanban";

export const title = "Basic kanban board";

const columns = [
  { id: "backlog", name: "Backlog" },
  { id: "progress", name: "In progress" },
  { id: "done", name: "Done" },
];

const Example = () => {
  const [data, setData] = React.useState([
    { id: "1", name: "Write brief", column: "backlog" },
    { id: "2", name: "Design mock", column: "progress" },
    { id: "3", name: "Ship docs", column: "done" },
    { id: "4", name: "QA pass", column: "progress" },
  ]);

  return (
    <div className="w-full overflow-x-auto">
      <KanbanProvider
        className="w-full max-w-4xl min-w-[36rem]"
        columns={columns}
        data={data}
        onDataChange={setData}
      >
        {(column) => (
          <KanbanBoard id={column.id} key={column.id}>
            <KanbanHeader>{column.name}</KanbanHeader>
            <KanbanCards id={column.id}>
              {(item) => <KanbanCard key={item.id} {...item} />}
            </KanbanCards>
          </KanbanBoard>
        )}
      </KanbanProvider>
    </div>
  );
};

export default Example;
```