TaskBoard - Custom Styles

#Usage

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

<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" density="compact" class="support-board">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Use root classes, density values, data attributes, and CSS variables to style the runtime shell. Use slots or UI parts when the visible card, header, menu, or swimlane markup needs to change. These styles live in the app; they are not hidden packaged themes.

#Choose a Styling Layer

Prefer variables for broad decisions and data attributes for object-specific decisions. Replace markup only when CSS is fighting the structure.

#Small Override

Scope product tokens to the board wrapper, then feed them into TaskBoard variables.

.support-board {
    color-scheme: light dark;
    --support-surface: light-dark(var(--p-surface-0), var(--p-surface-950));
    --support-column: light-dark(var(--p-surface-50), var(--p-surface-900));
    --support-border: light-dark(var(--p-surface-200), var(--p-surface-800));
    --support-accent: light-dark(var(--p-primary-600), var(--p-primary-300));

    --p-taskboard-background: var(--support-surface);
    --p-taskboard-column-background: var(--support-column);
    --p-taskboard-swimlane-border-color: var(--support-border);
    --p-taskboard-drop-indicator-color: var(--support-accent);
    --p-taskboard-focus-ring-color: var(--support-accent);
}

State classes and data attributes handle targeted styling.

.support-board .p-taskboard-card-selected {
    outline-color: var(--support-accent);
}

.support-board [data-column-id='blocked'] {
    --p-taskboard-column-background: color-mix(in srgb, var(--p-red-500) 8%, var(--support-column));
}

.support-board [data-task-id='escalation-42'] {
    scroll-margin-block: 1rem;
}

#Style System Pattern

Most product boards need a few coordinated decisions rather than one CSS override. Start with a wrapper class, bind the density that matches the product mode, then map app tokens into TaskBoard variables.

<TaskBoard.Root v-model:tasks="tasks" :density="boardDensity" class="launch-board">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

#CSS Variables

Common variables include:

Set variables on a wrapper when the change belongs to one board. Set them in the app theme only when every TaskBoard should inherit the same treatment.

#State and Object Hooks

Runtime classes describe behavior state. Data attributes identify public objects.

Avoid styling private DOM depth. Anchor selectors to a local board class plus a public class or data attribute.

#Visual Style Systems

The style preview switches between three app-owned treatments while the TaskBoard data, drag behavior, selection, and keyboard handling stay the same. The column headers, card surfaces, drag preview, density, and color tokens all change together so the board feels like one product surface rather than a themed card list.

#CSS Variable Example

The CSS-variable preview changes TaskBoard shell tokens without replacing runtime parts. Use this route when the structure is already right and the board only needs product colors, borders, and spacing.

#Checklist

• Scope product styles to a board wrapper such as .support-board.
• Use light-dark(...) or separate mode tokens when the app supports dark mode.
• Keep selected, focused, dragging, filtered, invalid-drop, and print states visible.
• Keep the app-owned visual system close to product data: priority, account tier, SLA, campaign stage, or review confidence should drive the visible differences.
• Tune --p-taskboard-column-min-width with the available container width; too-wide columns can hide useful board context.
• Use public classes and data attributes for state styling.
• Move to Card Slots, Column Slots, or UI Parts when custom styling starts requiring extra markup.

#API

Relevant styling APIs include density, root classes, runtime state classes, data-column-id, data-task-id, data-swimlane-id, data-print-target, --p-taskboard-* variables, TaskBoard.ColumnContent, TaskBoard.Card, TaskBoard.ColumnHeader, and copied UI parts. See Theming for the full variable reference and Data Attributes for stable selectors.

#Related Docs

• Compound Components
• UI Parts
• Card Slots
• Column Slots
• Data Attributes
• Slots and Contexts
• Theming