shadcn.io is not affiliated with official shadcn/ui
CRM Dashboard Sidebar Block for React Aria
A sales pipeline in a fixed-height window: Lead, Qualified, Proposal and Won with deal counts and totals from fourteen deals, a Mine or Team toggle, and a table whose Advance buttons move deals between stages.
Installation
Overview
Give a CRM its whole shell with this CRM dashboard sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds the Sidebar as the pipeline: All deals, Lead, Qualified, Proposal and Won, each with a count badge and the total value of its deals, worked out from fourteen typed deals, and a check on Won. A Toggle Group in the rail switches between Mine and Team, and every count and total is worked out again. Beside it, the top bar names the open stage and holds Add lead, a Shine Button and the only colored control. The page is a table of the stage's deals, each with its owner, close date, value and an Advance Button that moves it to the next stage; the rail's counts and totals change with it and a status line says what moved. Add lead takes the next of three sample leads, and a stage with no deals shows an Empty state in the same space. The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Toggle Group, Button, Empty, Avatar, Shine Button and Guides, with a CSS entrance only. For sales tools, recruiting pipelines and any app whose navigation is a funnel.
FAQ
Where do the counts and totals come from?
From DEALS, the 14 typed deals at the top of the file, each with a stage, an owner and a value in whole dollars. A stage's count is the number of deals in it for the chosen scope, and its total is the sum of their values; All deals counts every stage. Mine keeps the deals owned by "me" and Team keeps all of them. Nothing is typed twice: Advance and Add lead change the list, and the rail, the table, the caption and the status line all read it. A badge is hidden at zero.
What does Advance do, and where does focus go?
It moves the deal one stage on (Lead to Qualified, Qualified to Proposal, Proposal to Won) and the buttons are named after the deal and the stage ("Advance Quayside Hotel bar to Won"). Won deals show a check and the word "Won" instead of a button. When the deal leaves the open stage, focus moves to the next deal's button, or to the page if there is none, so a keyboard user can keep going down the list. Moving a deal never changes the window's height.
What stays in the page, and how do I connect it?
Everything. Advance and Add lead change the block's own list; nothing is saved and reloading starts over. Add lead takes three sample leads in order, then says there are no more. Replace the handlers with calls to your CRM's API and update the list from the result. The stages are links to # whose handler shows the stage's deals instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. Point them at your routes and mark the current one with isActive.
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. The Mine and Team toggle and the stages are in it. Escape or choosing a stage closes the sheet and focus goes back to the menu button. The first screen is the table, whose Advance buttons keep their names but show only an arrow, and the status line at the foot says what changed. The window keeps its height and only the table scrolls.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons. The toggle and the totals give way to the five stage icons, which stay links. Each icon keeps its link's full name for screen readers, which includes the count and the total, and a tooltip shows the stage and its count on hover or focus. 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 the stages named by their group and the open one marked as the current page. The scope toggle is a labelled group of buttons, and the table has a caption that gives the count and the total, column heads, and a button named for each deal. One polite status line reports each change, and values and counts are isolated so they read in order in a right-to-left layout.