Tri-Pane Workspace Shell

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<TriPaneWorkspaceShell />

Installation

Usage

The three columns are passed in through the nav / list / detail slots. The shell derives its mode from the container width: on desktop the three columns sit side by side (the nav column can collapse to an icon rail), on tablet the nav degrades to an overlay, and on mobile it turns into page-by-page navigation.

import {
  TriPaneWorkspaceShell,
  useTriPaneWorkspace,
} from "@/components/ui/tri-pane-workspace-shell";

<div className="h-[600px]">
  <TriPaneWorkspaceShell
    navHeader={<span>Workspace</span>}
    nav={<NavList />}
    list={<MailList />}
    detail={<MailDetail />}
  />
</div>;

Inside any of the columns, use useTriPaneWorkspace() to read the current mode and advance to the next column in mobile page-by-page mode:

function MailList() {
  const { mode, showPane } = useTriPaneWorkspace();
  return (
    <button
      onClick={() => {
        if (mode !== "desktop") showPane("detail");
      }}
    >
      Open message
    </button>
  );
}

Props

useTriPaneWorkspace()

Callable from any column inside the shell. It returns { mode, activePane, showPane, navCollapsed, setNavCollapsed, navOpen, openNav, closeNav } for advancing pages and keeping state in sync.

How it works

• Breakpoints on container width, not window width: a ResizeObserver measures the shell itself, so it degrades correctly no matter where it is embedded (including next to a sidebar).
• Unified geometry + spring sequence: the three columns are absolutely positioned and tween their x / width; on a mode change the same spring set carries them, and a small increasing delay produces a left-to-right sense of choreography.
• Spring parameters can be tuned alongside the interaction color transitions through tokens such as var(--wb-duration-fast,200ms).

Accessibility

• When the tablet overlay opens, focus moves into the nav column, Esc closes it, and focus returns to the trigger afterwards; clicking the overlay also closes it.
• A column that has left (moved off screen, or an overlay that closed) gets aria-hidden and inert, so it is neither reachable by Tab nor announced by assistive technology.
• The nav column is a navigation landmark (a dialog while it is an overlay); the collapse button carries aria-expanded, and the small-screen top bar's menu button links to the nav column with aria-controls.
• When the user has "reduce motion" enabled at the system level, all offsets and tweens complete instantly (the layout structure is unchanged).