shadcn.io is not affiliated with official shadcn/ui
Favorites Section Sidebar Block for React
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 Base 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.
Related
- Pro
A reading workspace in a fixed-height window whose sidebar holds three reading lists you reorder by dragging a grip or with Move up and Move down buttons, inside each list only.
- Pro
A project workspace in a fixed-height window whose sidebar rows each hold Pin, Duplicate and Archive buttons, with a real Undo in the footer that puts an archived project back in its old place.
- Pro
A blogging platform in a fixed-height window whose slim sidebar opens with a Recently edited group of up to four pages, a Clear button and a draft count on Posts, above four admin groups.
- Pro
A planning app in a fixed-height window whose sidebar groups, Projects, Documents and Tags, each have a plus that opens an inline create row and a menu with Sort A to Z, Sort by recent and Collapse.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.
- Pro
Simple Groups Sidebar
Headers and sectionsA company handbook in a fixed-height window whose muted sidebar has four groups of pages and a density toggle: Roomy, Default and Compact set the size of the rows and the gaps, and the rail prints the measured row height.