ProjectsPremium · Free

Project board.

A three-stage board with working task creation and keyboard-friendly status changes.

A LITTLE MOMENTUM

From idea to done.

Sample tasks. Change a status or add your own.

Planned

Accessibility

Review keyboard navigation

Status for Review keyboard navigation

Interface

Refine the empty state

Status for Refine the empty state

In progress

Engineering

Build the settings form

Status for Build the settings form

Done

Foundations

Set the spacing scale

Status for Set the spacing scale

Live interface · sample data · state resets on reload

GET STARTED

The source is yours.

npx shadcn@latest add https://ui.bld8.dev/r/project-board.json

Install into an existing application, or download the complete starter below.

Download the starter, unzip it and run the commands below. It includes a Next.js app, both BLD8 packages and their editable source. No BLD8 npm installation is needed.

npm install
npm run dev

Open http://localhost:3000. Node 22 and React 19 are used. Import ProjectBoard from @bld8/blocks in your own composition.

Download project board

NOTES TO SELF

A clear starting point.

Pass initialTasks to seed the board. Change stages with a select control. There is no drag-and-drop, backend or persistence.

Both collections use the MIT licence. Personal and commercial use are allowed; keep the licence notice when sharing the code.

About the collections Source manifest