Icon Rail
A narrow icon-only sidebar rail with tooltips, a sliding active indicator and an expandable labels mode.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
IconRailProps
Also accepts all props of Omit<React.ComponentProps<"aside">, "children" | "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| items* required | IconRailItem[] | — | Primary destinations, listed from the top |
| bottomItems | IconRailItem[] | [] | Pinned to the bottom, e.g. settings and the account avatar |
| header | React.ReactNode | — | Brand mark shown at the top |
| activeId | string | — | — |
| defaultActiveId | string | — | — |
| onActiveChange | (id: string) => void | — | — |
| expanded | boolean | — | Whether labels are shown (controlled) |
| defaultExpanded | boolean | false | — |
| onExpandedChange | (expanded: boolean) => void | — | — |
| expandedWidth | number | 224 | Width in px when expanded |
Install
$ npx shadcn@latest add https://chromotion.dev/r/icon-rail.json