shadcn.io is not affiliated with official shadcn/ui
Date Range Picker Navbar Block for Radix UI
An analytics navbar for a product-analytics tool: scrolling report tabs, a date-range picker with presets and a calendar, and an Export action.
Installation
Overview
An analytics navbar for React with Radix UI, the bar across Tallyfield, a product-analytics tool. Overview, Acquisition, Engagement, Monetization and Retention scroll in their own cell, and Overview is marked as the current page by a stroke on the bar's bottom edge. A range control offers Last 7 days, Last 30 days, Last 90 days and a custom range on a calendar, plus a check to compare with the previous period. The trigger shows the preset, or the chosen days without a year once both ends of a custom range are set. Export is the one primary action. Below the md breakpoint the range opens in a drawer, and Export moves into that drawer. The popup and the drawer open over the page, so the block stays one bar high (56 pixels). The page's rails and top rule come from the Guides spine and the bar draws no bottom border: the next block's top rule is its bottom edge. It's built from Popover, Drawer, Calendar, Radio Group, Checkbox, Shine Button, Button and Guides, with your theme's tokens for every colour. For analytics products whose header has to hold a report's range without leaving the page.
FAQ
How do I change the tabs and the presets?
Edit TABS for the report links (a label, an href and, for the page you are on, current: true) and PRESETS for the radio (an id and a label). The current tab gets aria-current="page", which draws the stroke, and after the page loads it scrolls to the centre of the tab cell so a long label is not cut off at the edge. The fade at the end of the cell is a mask, so the next tab peeks through when there is more to scroll.
How does the range label get written?
Last 7 days, Last 30 days and Last 90 days put that label on the trigger. Custom range shows the calendar. Once both ends are chosen, the trigger reads the days and short months ("12 Mar – 18 Mar") and never a year. The calendar itself is not given a stored range: each choice is copied into the label. The selected days are painted with the foreground token, not the primary colour. A polite line names the preset, or the custom days, when the choice changes.
What does Compare to previous period do?
It flips compare in the block and nothing else. A polite line says the comparison is on or off. There is no second series in this navbar: keep the flag and pass it to the report under the bar.
How does it work with a keyboard and a screen reader?
The wordmark is a link home (its name stays available when the word hides). The tabs are links in a nav landmark named Main. The range trigger is a button whose description is the polite line. The presets are a radio group named Date range, and the compare control is a checkbox. Export is a link.
The range popup is not modal: Tab can leave it, and Escape closes it.
How does it work on a phone?
Below sm the wordmark keeps its icon and hides the name. The tabs still scroll. Below md the range trigger opens a drawer from the bottom instead of a popup, and Export leaves the bar and sits at the bottom of that drawer, so at 320 pixels the bar is the icon, the tabs and the range chip. The drawer scrolls when the calendar makes it taller than the screen.
What moves, and what happens with reduced motion?
Nothing moves on load except the current tab scrolling into view, which is a jump to a position, not an animation. The popup and the drawer use their own open transitions, and a band of light sweeps across Export once on hover and keyboard focus. With reduced motion the drawer appears without sliding and the light fades in where it stands.