App Shell
Application frames: a simple AppShell (rail or top bar, header, content, detail rail and status bar) and the Sidebar parts for collapsible icon rails, floating and inset sidebars, nested groups, secondary panels and right-hand inspectors.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/app-shell-crawler-control.json.
Usage
Examples
Capture console · icon rail, capture queue tabs and expandable run feeds
Dual sidebar · digest inbox, reading-plan panel and an author directory
Finance dashboard · grouped sidebar, search and reports
A finance workspace with grouped navigation, search, revenue, visitor and product panels, customer filters and reports.
Icon rail · library switcher, nested collections and a reader menu
Newsletter reader · library and topics sidebar, issue list, reading pane and a reading-tools rail
Mini icon rail · research notebooks with per-section pages and view tabs
Inset icon rail · per-section navigation, site, publication and environment switchers
Floating sidebar · header ⌘K search, reading queue and shelf switcher
Floating sidebar · library research assistant with answer modes, sources and cited replies
Inset sidebar · study progress rings, reading goal and a header notifications feed
Source tile rail · workspace tabs, section tiles and a status-badged source tree
Resizable sidebar · reading-group study threads, notes tab and a header tutor picker
Library top bar · circle and collection switchers, grouped routes and an apps grid
Journal top bar · section pills, sidebar page search and an inset notifications sheet
Documentation sub-menus
Search, loading and no-result states
Collapsible icon rail
Details panel on the right
Workspace switcher
API
Accessibility
Preserve the skip link and main landmark (it leaves the tab order while a modal is open), and name each navigation and complementary region. Mark the current page with aria-current. The mobile drawer keeps focus inside while open and restores it on close; the trigger reports aria-expanded and its shortcut, and toggles are announced politely.