App Shell Blocks

An application shell with a sidebar, top bar, and content area.

A sidebar-free app shell with a sticky top bar (logo, search, avatar dropdown) above a tabbed content area featuring project cards, a task checklist, and an activity feed.

App shell with a collapsible icon-rail sidebar, search top bar, avatar, and dashboard placeholder cards

Pro app shell: a command-center frame whose top bar chains Org, Project, and Environment context switchers (blur-swapping) beside a live system-status pill, a Cmd+K palette, notifications, and a user menu, over a dashboard of count-up KPIs, a revenue area chart, and a live activity feed.

Pro app shell: an AI copilot three-pane frame where a task workspace docks a right-hand assistant panel that reflows the layout when toggled, streams a reply with a typing indicator, and offers suggested-action chips beside a left task-list nav with a focus-progress meter.

Pro app shell: a community workspace with a full-height grouped nav sidebar and a top bar carrying a Cmd+K command palette, a create menu, an inbox, grouped notifications, and toggleable community-feed cards.

Pro app shell: a focus-mode document workspace whose entire chrome (sidebar and top bar) collapses into a distraction-free editor and restores, animated with blur, with a Cmd+K palette and an Esc-to-exit floating control.

Pro app shell: a workspace-tabs frame with a closable, browser-like tab strip and a sliding active indicator in the top bar; switching a tab blur cross-fades the content between an overview, a pipeline board, and a deals chart, over a persistent sidebar.

Pro app shell: a split-view master-detail inbox where the content region divides into a resizable conversation list and a detail pane; selecting a row blur-swaps the detail (status, properties, thread, reply composer) with a draggable divider.