shadcn.io is not affiliated with official shadcn/ui
Favorites Section Sidebar Block for Radix UI
A knowledge workspace in a fixed-height window whose muted sidebar has a Favorites group above All pages, where a star on every row pins a page, up to five.
Installation
Overview
Pin the pages you use most with this favorites sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a muted Sidebar for Saffronpin, a knowledge workspace. Favorites sits above All pages. Every row carries a star Toggle: pressing it pins the page to Favorites and pressing it again returns it. Five is the limit: a sixth star is refused in words and stays off. Pages keep their place in All pages either way, and an empty Favorites group says Star a page to pin it here. The page shows the open page in text with how many favorites are used. Built from Sidebar, Toggle, Badge and Guides, with a CSS entrance only. For wikis, document tools and any rail with too many pages to scan.
FAQ
What happens at the sixth favorite?
The star stays off and the status line says Favorites hold 5 pages and to unstar one to make room. The count in the top bar, 5 of 5, shows why. Unstarring any favorite frees a slot.
In what order do favorites appear?
In the order they were starred, oldest first, so a page does not jump when you star another. All pages never reorders; a starred page keeps its place there with a filled star.
Where does focus go after unstarring in Favorites?
The row leaves Favorites, so focus moves to the same page's star in All pages. Starring from All pages leaves focus where it was.
What happens when the sidebar folds to icons?
The rail shows both groups as icons with tooltips and hides the stars. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The pages are typed at the top of the file and the favorites live in the block's state; reloading resets them. Save the list of page ids per person in the star handler to make it real.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The stars are always visible there, and choosing a page closes the sheet. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.