Rail
The 64px navigation every desktop screen shares.
Page content
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/rail.jsonOne rail, always something active
The rail is the shell. Every desktop screen renders it, and every screen passes
an active key — there is no state where the rail is present but nothing in it
is lit, because that reads as a loading bug rather than a location.
Below md it becomes a bottom bar
Same items, same order, moved to where a thumb can reach. This is a degradation, not a redesign: the Figma file has dedicated mobile screens, and the desktop screens it belongs to have no mobile design, so inventing one here would be inventing a design that does not exist.
Below md the rail is fixed to the bottom of the viewport. Screens that use it
need bottom padding — every screen in this project carries pb-16 md:pb-0 on its
outermost element for exactly that reason.
| Prop | Type | Default | Description |
|---|---|---|---|
| active | RailKey | — | Which destination is current. Always pass one. |