PrimeUI React TaskBoard

@primeui/react-taskboard provides the React 19 components for building PrimeUI task boards.

Installation

Install the component and its styles.

npm install @primeui/react-taskboard @primeui/taskboard-style

Requires react and react-dom 19 or newer as peer dependencies. The headless runtime does not depend on PrimeReact.

Import

Import the TaskBoard namespace from the component package.

import { TaskBoard } from '@primeui/react-taskboard';

Named components, individual parts, and public hooks are also available through dedicated entry points.

import { TaskBoardRoot, TaskBoardContent } from '@primeui/react-taskboard/components';
import { TaskBoardColumn } from '@primeui/react-taskboard/parts/column';
import { useTaskBoardHistory } from '@primeui/react-taskboard/hooks';

Call hooks in child components inside TaskBoard.Root or the corresponding part provider. See the API reference for component props and context hooks.

Usage

Compose the parts inside the root. In this example, tasks contains your initial task records and columns contains their column definitions. Each task has an id, title, and columnId matching a column id. defaultTasks lets TaskBoard own subsequent data changes.

<TaskBoard.Root defaultTasks={tasks} columns={columns} dataKey="id" columnField="columnId">
    <TaskBoard.Content>
        {columns.map((column) => (
            <TaskBoard.Column key={column.id} value={column.id} column={column}>
                <TaskBoard.ColumnHeader>{column.label}</TaskBoard.ColumnHeader>
                <TaskBoard.ColumnContent>
                    {({ item, column: itemColumn }) => (
                        <TaskBoard.Card item={item} column={itemColumn}>
                            {String(item.title ?? item.id)}
                        </TaskBoard.Card>
                    )}
                </TaskBoard.ColumnContent>
            </TaskBoard.Column>
        ))}
    </TaskBoard.Content>
</TaskBoard.Root>

In Next.js App Router, place interactive composition, callbacks, and hooks in a module with 'use client'.

Styles

Load the structural stylesheet once in your application entry file. Add the PrimeOne theme to map TaskBoard styles to PrimeUI design tokens.

import '@primeui/taskboard-style/style.css';
import '@primeui/taskboard-style/themes/primeone.css';

The theme file uses tokens supplied by your application theme. See Theming for theme setup and custom CSS variables.

UI Parts

Use the PrimeUI CLI to copy optional, customizable UI parts into your project. Run one of the following commands from the project root; it writes the parts to src/components/primeui/taskboard.

PrimeOne

npx -y @primeui/cli add taskboard --framework react --ui primeone --output-dir ./src/components/primeui

PrimeOne parts use PrimeReact controls. Install their dependencies and a theme preset:

npm install @primereact/core @primereact/ui @primeicons/react @primeuix/themes

Configure PrimeReactProvider as shown in the setup guide, then load the copied component stylesheet after the runtime styles. This path assumes @/ is an alias for src/.

import '@/components/primeui/taskboard/assets/style/components.css';

Tailwind

npx -y @primeui/cli add taskboard --framework react --ui tailwind --output-dir ./src/components/primeui

Tailwind parts use native HTML controls, utility classes, and @primeicons/react icons. They do not require PrimeReact or the copied PrimeOne component stylesheet.

npm install @primeicons/react

Include the copied source in Tailwind scanning. Follow the Tailwind setup guide to configure the PrimeUI color utilities and theme tokens.

Documentation

See the documentation and demos for setup, composition, and customization. For questions and assistance, visit PrimeUI Support.

License

Licensed under the PrimeUI Commercial License - Copyright (c) PrimeTek Informatics