Shadcn Sidebar Icon Rail

Icon rail that collapses. Built by composing Avatar, Button, Sidebar. Uses cn alongside the shadcn primitives. A free, open source shadcn sidebar example you can install with npx shadcn@latest add @reui/c-sidebar-2 and edit as your own code.

Labels give way to tooltips at 3rem, with a rail and a trigger to drive it.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: Narrowing the nav to icons while the brand tile and account avatar stay in view, toggled by an edge strip or a header button

When to use

The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
A right side inspector that shows the details of the record open beside it

When not to use

A nav with no icon state that holds a workspace switcher and project row menus: use the Sidebar Workspace Switcher example
A complete multi page product layout with header, nav and content area already built: use the App Shell blocks
Account settings pages that switch between personal details, billing and team panels: use the Profile blocks
A shop catalog facet panel with price range, brand counts, color swatches and sizes: use the Filter Sidebar blocks

Agent notes

On the radix twin a row tooltip throws without a TooltipProvider above it; keep the one the example mounts or hoist it to your app root
Give each new row a tooltip, since at 3rem the label is clipped and the tooltip is the only name a pointer user sees
The collapsed state resets on reload; read the sidebar_state cookie on the server and pass it as defaultOpen
Menu links are anchors passed through render on the base twin and asChild on radix; point each # href at your route
SidebarProvider listens for Cmd or Ctrl+B on the whole window, so pressing it in a text editor on the page toggles its open state too

Markdownhttps://web.dev.reui.io/components/sidebar/c-sidebar-2.md

MCPget_example("c-sidebar-2")

Installnpx shadcn@latest add @reui/c-sidebar-2

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Sidebar Icon Rail

Dependencies

About Shadcn Sidebar Icon Rail

What You Can Build With Shadcn Sidebar Icon Rail

Composes Avatar, Button, Sidebar, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-sidebar-2
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Sidebar Examples

Workspace Switcher Application shell with a workspace switcher
Docs Navigation Documentation nav with sub-menus
Inspector Panel Right-hand inspector panel
Filter & Loading Filtering, loading and empty states

Related Shadcn Component Categories

Signature Pad
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Skeleton
Open-source shadcn skeleton components for loading placeholders, perceived performance, and content previews.
Slider
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Sonner
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Sortable
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Spinner
Open-source shadcn spinner components for loading indicators, async actions, and button states.

Frequently Asked Questions

When should I use Shadcn Sidebar Icon Rail?

Use it for narrowing the nav to icons while the brand tile and account avatar stay in view, toggled by an edge strip or a header button.

Shadcn Sidebar as a whole fits:

The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
A right side inspector that shows the details of the record open beside it

For a nav with no icon state that holds a workspace switcher and project row menus, use the Sidebar Workspace Switcher example. For a complete multi page product layout with header, nav and content area already built, use the App Shell blocks. For account settings pages that switch between personal details, billing and team panels, use the Profile blocks. For a shop catalog facet panel with price range, brand counts, color swatches and sizes, use the Filter Sidebar blocks.

How do I install Shadcn Sidebar Icon Rail?

Run npx shadcn@latest add @reui/c-sidebar-2. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Sidebar Icon Rail free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Sidebar Icon Rail use?

It composes Avatar, Button, Sidebar. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.