shadcn.io is not affiliated with official shadcn/ui
Legal Practice Sidebar Block for React
A law firm's practice manager in a fixed-height window whose slim sidebar lists four matters with billed hours and a footer timer that logs time entries to the chosen matter.
Installation
Overview
Time a matter without leaving its list with this legal practice sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Docketwell, a law firm's practice manager, with four active matters, each with the hours billed to it. A card in the rail's foot runs a real clock from the Timer on the chosen matter: Stop and log adds a time entry, and the matter's hours badge, its table of entries and the Today line are all sums of the entries. Opening another matter while the clock runs stops it, logs the time and says so. Built from Sidebar, Timer, Badge, Button and Guides, with a CSS entrance only. For time tracking, billing tools and any rail with a running clock.
FAQ
Is the clock real?
Yes. The catalog Timer counts up once a second while a matter is being timed, and the card shows the elapsed seconds as hours, minutes and seconds. The screen reader is not told every second: the clock has the timer role, which is not announced, and the status line only speaks when you start or stop.
What does Stop and log do?
It adds a time entry to the matter being timed, dated today, for the elapsed time rounded up to whole minutes with a minimum of one, and resets the clock. The entry appears at the top of the matter's table, the hours badge in the rail grows, and Today in the card is the sum of today's entries across all matters.
What happens if I open another matter while the clock runs?
The clock stops and its time is logged to the matter it was running on, and the status line says so, for example Stopped the timer and logged 3 min to Hollis v Marden. The time is never silently lost and never moved to the matter you opened.
What happens when the sidebar folds to icons?
Folded, the rail is four matter icons with tooltips giving the billed hours, and a dot on the one being timed. The timer card is hidden while the rail is folded, but the clock keeps running. 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.
What stays in the page, and how do I connect it?
Everything. The matters and their entries are typed at the top of the file and nothing is billed. Reloading clears the new entries. Save the entry from the stop handler to your billing system and load the matters from it. The rail links are SidebarMenuButtons with render set to an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The timer card is inside it. Starting and stopping leave it open; choosing a matter closes it. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.