shadcn.io is not affiliated with official shadcn/ui
Usage Ring AI Product Navbar Block for React Aria
A one-bar navbar for a language-model API: five links, and a usage ring in the bar, one button that opens a popover with the tokens used, the limit, the reset and the plan, beside an Upgrade Shine Button.
Installation
Overview
A navbar for an AI product in React with React Aria. The wordmark of Nimbalt, a language-model API, leads, and Models, Playground, API, Pricing and Research follow as plain links, the current page marked by a foreground stroke on the bar's bottom edge. At the end of the bar a small ring, filled to this month's share of the token limit, sits beside "1.24M / 2M": together they are one button, and pressing it opens a popover with what you've used (1.24M of 2M, 62%), when it resets (in 9 days) and your plan. The ring is drawn in the foreground tone, so the Upgrade Shine Button is the only primary control in the bar. Below the lg breakpoint the links fold into a sheet from the top and the ring stays in the bar, shrinking to its circle on a phone. The popover and the sheet open over the page, so the block stays one bar high. It's built from Circular Progress, Popover, Data List, Navigation Menu, Sheet, Shine Button and Guides. For API and model products whose users watch a quota.
FAQ
How do I show real usage?
Edit USAGE at the top of the file (used and limit in millions of tokens, resetsInDays, plan), or replace it with props from your server. The percentage (PERCENT), the ring, the trigger's label and the popover's rows all derive from it. The reset is typed as a count of days, not a date, so the block never reads the clock.
How is the ring named for a screen reader?
The ring is decoration inside a button; the button's own name says what it is and carries the figures: "Token usage this month: 1.24M / 2M". The visible text "1.24M / 2M" is part of that name, so voice control that says what it sees works. Inside the popover the figures are a definition list.
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. React Aria's popover is modal: the page behind it is out of reach until it closes.
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 the links and an Upgrade button in its foot. The ring stays in the bar on every width; below sm its figures and the bar's Upgrade button give way to the circle and the sheet's. The popover fits the screen at 320 pixels.