shadcn.io is not affiliated with official shadcn/ui
Kanban Board Sidebar Block for React
A board app in a fixed-height window: three boards with micro stacked bars of their lanes, a Board, List and Timeline switch and Status, Priority and Assignee checkboxes that dim the cards that no longer match.
Installation
Overview
Give a board app its shell with this kanban board sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar as an inset rail: the product's mark, three boards each with a micro bar of its lanes (Done solid, Doing half, To do an outline) and its card count, a View Segment Group (Board, List and Timeline), and three groups of Checkbox filters for status, priority and assignee. Beside it, a top bar names the board and holds Add card, a Shine Button and the only colored control. The page draws the chosen board as lanes of cards, as rows, or as bars on a two-week timeline. Untick a facet and the cards that no longer match get a dashed outline and the word Dimmed, without moving or hiding any; Add card puts an untitled card in To do and the rail's bar and count follow. The rail collapses to one icon per board with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Segment Group, Checkbox, Avatar, Shine Button and Guides, with a CSS entrance only. For task boards, backlogs, pipelines and any app whose sidebar chooses a board and how to see it.
FAQ
How are the micro bars and counts worked out?
From CARDS, the typed list at the top of the file. A board's count is the number of cards that name it, and each lane's share of the bar is that lane's cards over the board's, so adding a card changes the count, the bar and the lane in the page together. The bar is decoration: the count and the board's name are the link's accessible name. In your app, compute them from your cards the same way, or take the totals from your server.
Why dim cards instead of hiding them?
So the board keeps its shape and nothing jumps while you filter. A dimmed card keeps its place with a dashed outline and the word Dimmed (it is never hidden or faded to an unreadable colour), and the line above the board counts how many are dimmed. Lanes keep their cards, so Board, List and Timeline all show the same set. If you prefer to hide, filter the list before drawing it.
What stays in the page, and how do I connect it?
Everything. The cards are typed in the block, and choosing a board, switching the view, unticking a facet and adding a card only change its own state; nothing is saved, and reloading starts over. Dragging cards between lanes isn't part of this block: if you need it, pair the lanes with a board kit that also offers a Move to menu. The boards are links to # whose handler opens the board instead of navigating. They're SidebarMenuButtons with render set to an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Escape or choosing a board closes it and focus goes back to the menu button. The board keeps its three lanes inside a scrollable region you can reach with Tab, so the page never scrolls sideways, and the status line at the foot of the window states the live result ("Spring relaunch: 9 cards, 2 dimmed.").
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to icons. The boards keep their icons with tooltips that include the card count; the view switch and the filters have no folded form, so they give way. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, with each group named by its label. Every checkbox is named by its facet, the segment group is named View, and each card says its priority in a glyph and a word and its assignee by name. The board is a labelled scrollable region, one polite status line reports each change, and names and counts are isolated so they read right in a right-to-left layout.