Shells

Mobile-first app shell with sticky compact header, single-scroll body, and fixed bottom tab-bar. The first shell in Decantr's catalog optimized for mobile-portrait consumer apps. Desktop scales gracefully to a 480px-wide centered column. Use for: dating apps, social discovery, swipe feeds, anywhere a bottom tab navigator is the primary navigation affordance.

Horizontal navigation shell with a compact sticky header, shared content insets, and a curated page-width rhythm. Used by public browsing, editorial catalog pages, and marketing-style registry surfaces.

Three-column layout for collaborative editing with page tree navigation, document editor body, and comment/activity sidebar. Used by document-editor archetype for real-time collaboration.

Full-width header spanning both columns, with left sidebar navigation below. Combines top branding with sidebar navigation depth.

Main content area with a collapsible AI copilot side panel. Right-side drawer overlays or pushes body content. When collapsed, a floating pill button ('Ask AI') remains visible. Used for AI-assisted workflows where copilot can reference body content.

Three-column layout with left navigation and right inspector/detail panel. Used for admin dashboards, email clients, IDE-style apps.

Horizontal nav with main content and a persistent footer. Used for marketing sites, documentation with ToC footer.

Terminal-style layout with status bar, resizable split panes, and hotkey bar. Optimized for CLI tool interfaces with monospace typography and ASCII borders.

Full-bleed spatial shell with a primary canvas, floating toolbar overlays, and presence/status surfaces that sit above the canvas without consuming layout width.

Three-column browse layout with navigation tree, item list, and detail preview. Classic mail/file-browser pattern. Used for email clients, file managers, documentation browsers, and any master-detail-detail interface.

AI chatbot layout with collapsible conversation sidebar and anchored input. Used by ai-chatbot archetype for chat-first applications.

Sidebar layout with a persistent footer bar. Used for apps needing status bars or action footers.

Main content with a right-side navigation panel. Useful for settings, documentation sidebars, or inspector layouts.

No persistent navigation. Scroll-driven hero-first layout. Used by portfolio landing pages.

Full-bleed public shell for cinematic launch, game, venue, and live-event homepages where the first viewport is a designed stage rather than a standard stacked marketing page.

Centered card on a background. Used for auth flows (login, register, forgot password) across all archetypes.

Slim header with centered content below. Used for checkout flows, focused task pages.

Responsive sidebar shell with a desktop split layout, a compact sticky header, and an overlay drawer below the md breakpoint. Used by dashboards, account workspaces, and admin operations surfaces.