shadcn explains why AI coding tools use horizontal tabs: nav is vertical, the working set is horizontal
xkonjin · x · 2026-09-29
shadcn lays out the design logic behind tab bars in AI coding apps:
- Vertical (sidebar) = navigation: organizational, hierarchical, a tree — history you don't need on screen at all times.
- Horizontal (top tabs) = the working set: live threads, always visible, with icons, colors, and status so you see what's running, done, or needs input at a glance.
- In apps like ChatGPT, Claude Code, and T3 Code, horizontal space is expensive — top tabs let you tuck away the sidebar and leave more room for the right panel (preview, browser, code view). The poster calls this convergence across tools.
More from coding & agent
- Open-source Raven agent runs 42 autonomous rounds over 4 days to ship a playable FPS — lxfater · 2026-09-29
- Open-Source Custom Composer Brings Transcription and Attachments to Cloud Claude Code — lucasmeijer · 2026-09-29
- MCP explained: an API spec for prompt engineering at scale, standardizing LLM context — _jaydeepkarale · 2026-09-29
- Dev explains why MCP, the standardized protocol for LLM context, deserves everyone's attention — _jaydeepkarale · 2026-09-29
- 3D Tool Atelier Ships Vanilla Claude Code Integration That Works With Subscriptions — lucasmeijer · 2026-09-29
- GitHub and Hugging Face host Training Agents IRL: six speakers on RL for agents in SF — ben_burtenshaw · 2026-09-29