Document Tabs Shell
Editor workspace shell with a strip of open document tabs, close buttons, an unsaved dot, and the active document content below.
Editor workspace shell with a strip of open document tabs, close buttons, an unsaved dot, and the active document content below.
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
Document Tabs Shell is the editor workspace frame: a slim header (Acme, Product workspace, Share) above a strip of four open document tabs, each with a file icon, title, and close button. Launch checklist is active and joined to the canvas below it, Roadmap draft carries an unsaved change dot, and a plus button opens a new tab while a counter reads 4 open, 1 unsaved. The active document fills the area below with its title, a Saved badge, and a meta row noting the last edit, word count, and share count.
Open tabs are one typed array with id, title, unsaved, and active fields. The distinction from sub-view tabs is the point: every tab is its own document, so the active tab notches into the canvas border and the rest sit flush. Wire the tab clicks to your document state and drop the editor surface into the dashed zone.
Reach for this shell wherever users keep several documents open at once and switch between them without leaving the workspace: a notes app, a code or config editor, or a report builder. Wire aria-current and the close buttons to your open-document state and persist the unsaved flag.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the multi-document editor with unsaved tracking. Other open-tab contexts:
Tip: keep the active tab notched into the canvas border and the rest flush, so users read the open document as a continuous surface rather than a floating panel.