Right Rail Shell
Three-column shell with an icon nav rail, main content area, and a right context rail showing a live activity list.
Three-column shell with an icon nav rail, main content area, and a right context rail showing a live activity list.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Right Rail Shell is the three-column frame: a 16-wide icon nav rail on the left, a main content area in the center, and a 64-wide context rail on the right. The right rail carries a live activity list of five events, Jordan Lee merged PR #214 into main 2 min ago, Marcus Kim commented on INV-2026-0341 at 18 min, Riley Parker opened issue prj_8h2k #47 at 41 min, and two more, each with an avatar, action line, and tabular timestamp. The main area holds the Overview page header with a chart slot spanning two columns plus Active projects and Members panels below.
Activity is one const array using the shared avatar set with realistic IDs and times. The right rail header shows a count badge matching the array length.
Reach for this shell for tools where persistent context adds value alongside the primary surface: audit logs that update while the user edits, an AI chat sidebar, or a help panel anchored to the current view. Do not use it when the right column would mostly be empty; collapse to the two-column sidebar shell instead. Wire the activity list to your events endpoint and replace the dashed panels with chart and table blocks.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace overview with a live activity rail. Other three-column contexts:
Tip: the right rail is hidden below xl by default; surface its content via a drawer or tab on narrower viewports rather than letting it collapse silently.