Project Board

A complete kanban workspace for product and engineering teams, with five workflow stages, smooth drag and drop, animated ticket creation and detail panels, editable properties, comments, and token usage charts. Includes sorting, filtering, light and dark themes, and responsive navigation.

Helios Design Tasks

Backlog3/8

To do3/5

In progress2/4

Review1/3

Done4/6

13 local tasks. Open a card to change its stage with the keyboard, or drag it between columns.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {BoardTemplate} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <BoardTemplate id="project-board" embedded/>;}

What's included

The template ships as a complete source package: the responsive sidebar and mobile drawer, five-column board with independently scrolling ticket stacks, sorting and filtering controls, animated empty states, and accessible ticket drag and drop. It includes the create-ticket dialog, ticket detail side panel with editable properties and comments, purple token usage charts, photographic team avatars, and every base component and demo data file they depend on.

Advanced playground, API and recovery states ↗

Project Board

Helios Design Tasks

Backlog3/8

To do3/5

In progress2/4

Review1/3

Done4/6

13 local tasks. Open a card to change its stage with the keyboard, or drag it between columns.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {BoardTemplate} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <BoardTemplate id="project-board" embedded/>;}

What's included

Advanced playground, API and recovery states ↗

Helios Design Tasks

Explore approval cards for agent handoffs

Add saved views for each project team

Record an audit trail for agent actions

Define semantic tokens for elevated surfaces

Add keyboard navigation to model picker

Return rolling limits with reset timestamps

Animate nested task groups as they stream

Tune chart contrast on dark dashboard cards

Polish the transition between plan questions

Ship overlapping avatar groups for cards

Keep generated screens aligned while zooming

Validate template dependencies during build

Document reduced-motion behavior for blocks

Installation

What's included

Helios Design Tasks

Explore approval cards for agent handoffs

Add saved views for each project team

Record an audit trail for agent actions

Define semantic tokens for elevated surfaces

Add keyboard navigation to model picker

Return rolling limits with reset timestamps

Animate nested task groups as they stream

Tune chart contrast on dark dashboard cards

Polish the transition between plan questions

Ship overlapping avatar groups for cards

Keep generated screens aligned while zooming

Validate template dependencies during build

Document reduced-motion behavior for blocks

Installation

What's included