shadcn.io is not affiliated with official shadcn/ui
Day Pips Trial Countdown Navbar Block for Radix UI
A one-bar navbar for an invoicing app in its free trial: four app links, a meter of fourteen day pips with the days to go that opens a popover of what ends, and an Upgrade Shine Button; the urgent state comes at three days.
Installation
Overview
An app navbar for React with Radix UI that keeps a trial in view. The wordmark of Sundrop, an invoicing app, leads; Invoices, Clients, Reports and Settings follow as links with the current page marked by a stroke on the bar's bottom edge. At the end of the bar an hourglass, a row of fourteen slim pips (the days gone in the foreground tone, the days to go faint) and "11 days to go" are one button that opens a popover: "When the trial ends", with how many days are used and three lines on what stops and what stays. At three days or fewer the hourglass takes the warning tone and the label reads "Last 3 days". The count is a typed constant, not the date, so nothing ticks and nothing depends on when you look. An Upgrade Shine Button is the only primary control. Below the lg breakpoint the links fold into a sheet from the top; below sm the pips shrink away and the label stays. It's built from Popover, Shine Button, Navigation Menu, Sheet and Guides. For SaaS apps with a time-limited trial.
FAQ
How do I set the days left, and how do I see the urgent state?
Edit DAYS_LEFT at the top (and TRIAL_DAYS if your trial isn't fourteen days). The pips, the label and the popover's "used" line all derive from them. Set DAYS_LEFT to 3 or less to see the urgent state: the hourglass takes the warning tone (text-warning, on the icon only, never the text) and the label reads "Last 3 days" (or "Last day"). In your app pass the number from your server, computed from the trial's end date, so the bar and the server agree.
Why a typed number and not a countdown?
A ticking sentence needs a clock, and a clock makes the server and the browser disagree on the first render. Day pips only change once a day, so a number from the server is enough. For a ticking sentence see the countdown banners.
How does the popover work with a keyboard?
Enter or Space opens the popover and moves focus into it; Escape or a click outside closes it and puts focus back on the trigger. It isn't modal, so the rest of the bar stays reachable.
The trigger's name is its text ("11 days to go"); the pips are decoration.
Why are the pips neutral?
The Shine Button is the one primary element in the bar, so the meter uses foreground tones: the used days at full strength, the days to go at 15%. The only status colour is the warning token on the hourglass when it's urgent, so colour is never the only signal: the label changes too.
How does it work on a phone?
Below lg the links fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was), with an Upgrade button in its foot. The trial stays in the bar: below sm the pips go and the hourglass and label stay, and below 368 pixels the label becomes available to screen readers only (the hourglass alone). The bar's Upgrade button appears from sm.