Focus Mode Shell
Minimal top bar with back link, document title, save state badge, and a centered max-w content column with no sidebar.
Minimal top bar with back link, document title, save state badge, and a centered max-w content column with no sidebar.
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
Focus Mode Shell strips the UI down to what one task needs: a sticky top bar 14 units tall carrying a back link to Projects, the document title Q3 2026 product brief, a Saved badge with a check icon, and Share plus Done buttons at the far right. Below it a centered max-w-2xl column holds two cards, Document with a tall dashed editor slot, and Collaborators with a shorter members slot. No sidebar, no secondary nav, no widgets competing for attention.
There are no data arrays; the shell is structural. The sticky header and centered column are the entire pattern; every decoration that was omitted is a deliberate choice.
Reach for this shell when the user is in a compose, write, or long-form edit flow where peripheral chrome pulls attention away from the primary task. Do not use it for dashboards, tables, or any view where the user needs to cross-reference other parts of the product while working. Replace the dashed panels with an editor or form block and wire the Done button to save and return.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document editor frame. Other focus-mode contexts:
Tip: the back link labels its destination explicitly, Projects rather than just Back, so the user always knows where Done will send them.