shadcn.io is not affiliated with official shadcn/ui
Emoji Labels Sidebar Block for Ark UI
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 Ark 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 asChild around 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.