Menu
Patterns for polishing sidebar list components in React/Tailwind apps
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | sidebar-list-polish |
| description | Patterns for polishing sidebar list components in React/Tailwind apps |
| domain | frontend-ui |
| confidence | low |
| source | earned |
Sidebar list panels (slide lists, file trees, layer panels) often start utilitarian and need polish. These patterns transform a basic list into a professional, designed panel.
Replace unicode symbols (↑↓✕←→) with inline SVG components. Unicode renders inconsistently across OS/browser combos and looks unpolished. Inline SVGs are 5-7 lines each, need no icon library, and render crisply at any size.
Wrap list items in a Tailwind group class. Place action buttons as absolute positioned elements with opacity-0 group-hover:opacity-100 transition-opacity. This keeps the list clean while making actions discoverable. For the selected/active item, always show buttons (opacity-100).
A single background highlight (bg-indigo-600/20) is not visually distinct enough. Use three signals together:
absolute left-0 w-[3px] rounded-full bg-indigo-400ring-1 ring-indigo-500/30bg-indigo-500/15For list items that represent visual content (slides, pages, cards), add a small preview area. Even a simple colored box with a number or icon is better than text-only. Use cycling accent colors for visual variety.
Never conditionally render ({show && <Panel />}) — it causes a hard mount/unmount cut. Instead, always render the panel and control with CSS: w-64 ↔ w-0 with transition-all duration-200 overflow-hidden. The inner content should have a fixed width matching the open state.