shadcn.io is not affiliated with official shadcn/ui
Emoji Labels Sidebar Block for React
A team wiki in a fixed-height window whose muted sidebar gives every page a glyph you choose from a popover of eight named icons, shown in the rail and in the page title, with a Reset icons button.
Installation
Overview
Let people mark their own pages with this emoji labels sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar in the theme's muted tone with fifteen wiki pages in five groups, each wearing a small glyph. On the page, the tile beside the title opens a Popover of eight named glyphs, Book, Rocket, Flag, Idea, Map, Star, Heart and Compass; choosing one changes the row in the rail and the tile in the page's title together, closes the popover and returns focus to the tile. Reset icons puts every page back, and with nothing changed it says so. The glyphs are Lucide icons and never emoji characters, which draw differently on every system. Folded to icons, the rail shows each page's glyph with a tooltip; on a phone it is a sheet. The page lists three headings and lines for the chosen page. It's built from Sidebar, Popover, Button, Avatar and Guides, with a CSS entrance only. For wikis, notes, docs and any app where pages carry a mark.
FAQ
Why Lucide icons and not emoji?
An emoji is a character, and every system draws it in its own colours and style, so a menu of them looks different on each device and can't follow the theme. A Lucide icon is drawn from the same set as the rest of the block, takes the text colour and reads the same everywhere. The eight glyphs are typed in GLYPHS with their names; add or swap icons there.
How does the picker work?
The tile is a button that opens the popover, which lists the eight glyphs as buttons, with the page's current one marked by aria-current and a check. Choosing one stores it for that page, closes the popover and puts focus back on the tile; Escape closes it the same way. The status line says which page now has which icon.
What does Reset icons do?
It puts every page back on the glyph it started with and says how many it reset. It stays in the top bar at all times; with nothing changed it is dimmed with aria-disabled and pressing it says "Every page already has its own icon." instead of doing nothing silently.
What happens when the sidebar folds to icons?
The group labels go and every page shows the glyph you chose for it with a tooltip carrying its name. The glyph is the whole row there, so a custom icon is how you tell pages apart in the strip.
What stays in the page, and how do I connect it?
Everything, and nothing is saved: the choices live in the block's state until the page reloads. The fifteen pages are typed in GROUPS. To keep the choices, store each page's glyph id with the page in your data and pass it in as the starting picks. The block sets persist={false} and shortcut={false}, so it writes no cookie. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element.
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. Choosing a page closes it and puts focus back on the button. The glyph picker is on the page itself, so it opens beside its tile and not inside the sheet.
Related
- 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.
- Pro
Brand Header Sidebar
Headers and sectionsA design-operations suite in a fixed-height window whose sidebar header is a brand lockup that opens a menu to go home, copy the logo name, copy the mark as SVG or open the brand guidelines.
- Pro
Tab Groups Sidebar
Headers and sectionsA markdown editor in a fixed-height window whose sidebar has a tab strip over its list, switching between Files, the open file's Outline and Bookmarks, each keeping its own selection and marking the chosen line in the document.
- Pro
Header Actions Sidebar
Headers and sectionsA notes app in a fixed-height window whose slim sidebar header holds three ghost icon buttons with tooltips: New note adds and opens a note, Search filters the notes, and the third folds the rail.
- Pro
Collapsible Items Sidebar
Folds and treesA design system's docs in a fixed-height window whose sidebar rows are split: a label that opens a section's overview and a separate chevron that opens its sub-menu, with a count of pages on each row.
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.