Project boardPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/project-board

• Markdown: https://ui.xzero.co.uk/components/blocks/project-board/markdown

• Access: Xzero Pro

• Registry id: project-board

• Source file: registry/blocks/project-board/project-board.tsx

• Built from: Button, Avatar, Motion

• Keywords: react kanban board, project board, task board, kanban component, accessible kanban, trello style board

Use this to track a focused set of work across stages. Connect its local card actions to your project data.

When to use

• A compact kanban with a handful of tasks across fixed stages.
• Boards where moving tasks should be accessible through explicit buttons, not drag only.

When not to use

• Use reorderable-list when order within one list matters more than stages.
• Use timeline for a dated sequence of events.
• Add drag and drop and virtualization, or use a dedicated board library, for large boards.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/project-board

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { ProjectBoard } from "@/components/xzero/blocks/project-board/project-board";

export function Board() {
  return (
    <ProjectBoard
      onTaskMove={(task) => updateTask(task.id, { stage: task.stage })}
    />
  );
}

API reference

ProjectBoard

A four-stage board (Planned, In progress, Review, Done) with a sprint progress bar, per-column counts, arrow buttons to move cards, an All work / My work filter, and an add task action. Tasks and owner portraits are sample data.

Prop	Type	Default	Description
onTaskMove	(task: { id: string; title: string; stage: "Planned" | "In progress" | "Review" | "Done" }) => void	–	Called after a task moves to its new stage.

Accessibility

• Each card has explicit buttons labeled "Move <task> to <stage>" instead of drag only.
• Moves are announced in a visually hidden role="status" region.
• Each column is a section labelled "<stage>, <n> tasks"; the filter buttons use aria-pressed.

Motion

• Cards travel between columns with a per-card layoutId on the gentle spring; new cards scale in from 0.98.
• The filter highlight glides between All work and My work, and the progress bar grows with scaleX.
• Reduced motion drops the layoutId and springs, so cards and bars change in place.

Responsive behavior

• The four columns need 820px; narrower boards scroll horizontally with proximity snap to each column.
• Below 700px each column is up to 78vw wide, team avatars hide, and padding tightens; below 400px the add button becomes icon only.
• Moves use buttons, so touch never needs a drag gesture.

Performance

• Cards move between columns with a per-card layoutId, which measures layout on each move.
• No virtualization; keep boards to dozens of cards rather than hundreds.

Notes for AI

• Use for a compact kanban of a few tasks. For large boards add virtualization and drag and drop.
• Replace initialTasks, the stages list, and the owner portraits; addTask cycles through sample draft titles.
• Owner portraits render with next/image from lib/media.
• Wire onTaskMove to persist the stage change.

Related

• Reorderable list: Organize items with direct drag and drop.
• Sidebar: Workspace: A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
• Avatar group: Show a team or set of contributors in a small space.
• Filter toolbar: Keep collection filters close and easy to reset.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt