Project boardPro
A living workflow board for moving work between stages.
- A compact kanban with a handful of tasks across fixed stages.
- Boards where moving tasks should be accessible through explicit buttons, not drag only.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ProjectBoard } from 'animui/project-board';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this to track a focused set of work across stages. Connect its local card actions to your project data.
import { ProjectBoard } from "animui/project-board"; export function Board() { return ( <ProjectBoard onTaskMove={(task) => updateTask(task.id, { stage: task.stage })} /> );}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.
onTaskMove(task: { id: string; title: string; stage: "Planned" | "In progress" | "Review" | "Done" }) => void–Called after a task moves to its new stage.- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.
