shadcn.io is not affiliated with official shadcn/ui
Stars Button Open Source Navbar Block for React Aria
A one-bar navbar for an open source embedded database: a version badge by the wordmark, Docs, Examples and Playground links, a Releases menu of the last three versions, a GitHub stars button with a typed count and a Get started Shine Button.
Installation
Overview
A navbar for an open source project in React with React Aria. The wordmark of Tarndb, an embedded database, carries the current version in a monospace badge; Docs, Examples and Playground are plain links, and Releases opens a panel of the last three versions, one line each in the version's own mono, the newest marked Latest. At the end of the bar a GitHub stars button shows the project's count in short form (18.4k) beside a Get started Shine Button. The count is typed into the block and never fetched, so the preview, the build and your tests don't depend on GitHub. Below the lg breakpoint the links and the releases fold into a sheet from the top, with the stars button and Get started in its foot. The panel and the sheet open over the page, so the block stays one bar high. It's built from Navigation Menu, GitHub Stars Button, Badge, Sheet, Shine Button and Guides. For libraries, databases and tools whose credibility is their repository.
FAQ
How do I show the real star count?
The block passes count (the typed STARS), so the button shows it and never makes a request. Fetch the number on your server or at build time and pass it in; or leave count out and the button asks GitHub once per repository per page load, in the browser, and shows the label alone if that fails. It reads username and repo for the link, which opens in a new tab and says so for screen readers; the count is also given in full ("18,400 stars") to them.
How do I change the releases?
Edit RELEASES at the top: a version, a one-line note and latest on the newest. The bar's panel and the sheet both read it. There are no dates on purpose: a typed date is stale the day after you ship, so link each row to its release notes and let those carry the date.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main. Enter or Space opens Releases, its button says whether it's expanded, and Escape closes it and puts focus back on Releases.
Opening the menu moves focus into the panel, which is a dialog: Tab cycles through its three versions until Escape or a click outside closes it. It opens on click, not on hover.
How does it work on a phone?
Below lg the wordmark, Get started and a menu button stay on the bar (the version badge and the stars button appear from sm); the menu button 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, the three releases and, in the foot, the stars button and Get started side by side. Choosing a link closes it and focus goes back to the menu button.
Does choosing a version close the menu?
Yes, in the panel and in the sheet, so a client-side route change that keeps the navbar mounted doesn't leave a menu open over the new page.
The menu's isOpen is held in the block (menuOpen) and each version closes it on press.
Get started render a link when they have an href.
How does it sit on the page?
It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. To keep it in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the panel still opens under it.