React kanban, timeline and workflow components
Free React workflow components: kanban boards, issue cards, timelines, steppers, approvals, comment threads, assignees, due dates and priority pickers.
18 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Workflow tools are dense, so these components stay legible at small sizes: issue cards with keys and priorities, kanban columns with counts, timelines and steppers that show where things stand.
Approvals, comments and assignees share one set of avatars and chips, so a project tool built from them feels coherent from the board to the detail view.
Components 17
Approval CarduiReact request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.npx shadcn@latest add ui.minidev.pro/r/approval-card.jsonAssign PickeruiAssignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.npx shadcn@latest add ui.minidev.pro/r/assign-picker.jsonComment ThreaduiThreaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.npx shadcn@latest add ui.minidev.pro/r/comment-thread.jsonDue Date ChipuiSmall Tailwind due date chip with a calendar icon that switches to a red border and icon when overdue. Use it on task cards, tickets and boards.npx shadcn@latest add ui.minidev.pro/r/due-date-chip.jsonGantt RowuiOne row of a Gantt timeline: a task label beside a track with a bar placed by start and end values on a shared scale. Stack rows to build a React roadmap.npx shadcn@latest add ui.minidev.pro/r/gantt-row.jsonIssue CarduiA compact issue tracker card with a monospace ticket key, status and priority badges, a title and an assignee line. Fits Linear or Jira style boards.npx shadcn@latest add ui.minidev.pro/r/issue-card.jsonIssue KeyuiA monospace ticket identifier such as MD-241 that renders as plain text or, given an href, as a link with an accent hover underline. For issue lists.npx shadcn@latest add ui.minidev.pro/r/issue-key.jsonKanban BoarduiA horizontally scrolling Kanban board built from column data: each column shows its title, a card count and stacked cards with a title and optional meta line.npx shadcn@latest add ui.minidev.pro/r/kanban-board.jsonKanban ColumnuiA single Kanban lane with a title, an optional count badge and a slot for any cards you render as children. Compose several to build your own React task board.npx shadcn@latest add ui.minidev.pro/r/kanban-column.jsonLive Cursors BaruiA multiplayer presence strip with overlapping colored avatars per collaborator and an editing now count. Suits docs, whiteboards and real time React editors.npx shadcn@latest add ui.minidev.pro/r/live-cursors-bar.jsonOnboarding WizarduiA three step React onboarding flow that walks new users through creating a workspace, inviting teammates and a done screen, with a stepper on top.npx shadcn@latest add ui.minidev.pro/r/onboarding-wizard.jsonPriority PickeruiA radio group of priority chips, Low, Medium, High and Urgent, each with a colored dot and aria-checked state. Built for issue trackers, tasks and ticket forms.npx shadcn@latest add ui.minidev.pro/r/priority-picker.jsonPublish BaruiReact publish bar with a draft, scheduled or published status badge, an autosave note, and Preview and Publish buttons wired to an onPublish callback.npx shadcn@latest add ui.minidev.pro/r/publish-bar.jsonStep ProgressuiStep progress bar made of segments that fill in accent for completed and current steps, with small labels under each. Fits checkout and onboarding flows.npx shadcn@latest add ui.minidev.pro/r/step-progress.jsonStepperuiNumbered stepper for multi-step forms that shows each step as a bar and a label, highlighting completed and current steps. Semantic ordered list in React.npx shadcn@latest add ui.minidev.pro/r/stepper.jsonWelcome ScreenuiReact onboarding welcome card with an eyebrow, headline, short intro, three numbered getting started steps and primary and secondary buttons for a first run.npx shadcn@latest add ui.minidev.pro/r/welcome-screen.jsonSortable ListuiDrag to reorder a list in React with Motion Reorder, plus Arrow key reordering from the handle and polite announcements of every move for screen readers.npx shadcn@latest add ui.minidev.pro/r/sortable-list.json
Blocks and full pages 1
Frequently asked questions
Does the kanban board support drag and drop?
The board renders columns and cards. Add drag and drop with dnd kit or pragmatic drag and drop and keep these components for the visuals.
Is there a multi step form stepper?
Yes. The stepper and step progress components show the current step, and the onboarding wizard block shows a full flow.
Can I show live collaborators?
Yes. The live cursors bar and presence dots show who is viewing.