Stars Button Open Source Navbar Block for React

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.

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.

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. Focus stays on Releases when the menu opens; Tab moves into the panel and the arrow keys move between the versions. The menu also opens on hover.

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.

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. Each version takes closeOnClick. Get started render the link they're given with render, with nativeButton={false}.

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.