# Kanban board
> Three-column kanban board: a dragged card leaves a dot trail, the target column lights up and a bar marks where it will land.
- Element: `<hf-kanban>`
- React: `import { HfKanban } from "@/components/lumesec/hf-kanban"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-kanban.json
- Page: https://elements.lumesec.ai/components/pixel-hd/kanban



Live preview: https://elements.lumesec.ai/view/hf-kanban

```html
<hf-kanban></hf-kanban>
```

## Installation

```bash
npx shadcn@latest add @lumesec/hf-kanban
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-kanban.json
```

## Usage

React:

```tsx
import { HfKanban } from "@/components/lumesec/hf-kanban";

export function Example() {
  return (
    <HfKanban />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-kanban.js"></script>

<hf-kanban></hf-kanban>
```

## Behaviour

Drag cards between columns: a trail of dots follows, the target column lights up and a bar shows where it will land. Dropping into Done bursts. Arrow keys move the focused card.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event  | React prop | Detail                                       | Description                                                                                                                                           |
| ------ | ---------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `move` | `onMove`   | `{ card: string, from: string, to: string }` | Fires after a card is dropped or moved by keyboard, including reorders within one column. `card` is the card title; `from` and `to` are column names. |

## Keyboard

| Keys                   | Action                                                           |
| ---------------------- | ---------------------------------------------------------------- |
| ArrowLeft / ArrowRight | Move the focused card to the end of the previous or next column. |
| ArrowUp / ArrowDown    | Move the focused card up or down within its column.              |

## Accessibility

* Columns are `role="list"` with the column name as `aria-label`; cards are focusable `role="listitem"` elements labelled `<title>. <tag>. Arrow keys move the card.`
* A visually hidden `aria-live="polite"` region announces `<title> moved to <column>`.
* A moved card keeps focus. Column headers show the card count.
* Column highlights, the trail and the insertion bar are drawn on an `aria-hidden` canvas.
* Reduced motion: moved cards jump to their new place without sliding and dropping into Done gives no spark burst; the drag trail and column highlight remain.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted`, `--ui-raised` and `--ui-surface`.

## Notes

* The columns (To do, In progress, Done) and six cards are built-in demo data.
* A pointer drag starts after 5px of movement. Cards in Done are struck through.
* Below 520px of viewport width the columns stack; this is a media query, not a container query.