For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/en/components/app-shell.md.
A3S UI
  • English
  • v0.1.0

      • App Shell

      The App Shell establishes a persistent navigation region and a bounded product workspace. It is the top-level frame used by A3S Office, gateway operations, and agent consoles.

      Live previewHTML · CSS · JavaScript

      Design system workspace

      Application composition preview
      Live pattern

      Compose product UI from stable primitives.

      Resize the viewport or collapse navigation. Content remains bounded and scrollable.

      ◇
      Agent sessionActive · 2 tools
      ▤
      ConfigurationValidated · ACL

      Usage

      <div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">...</header>
    <div data-app-content>...</div>
  </main>
</div>

      Parameters

      ParameterValuesDefaultPurpose
      data-navigationexpanded, collapsed, hiddenexpandedDesktop navigation state
      data-mobile-navigationopen, omittedomittedMobile drawer visibility
      --app-shell-navigation-sizeCSS length15remExpanded navigation width
      --app-shell-navigation-collapsed-sizeCSS length4remIcon-rail width
      --app-shell-min-heightCSS length36remBounded shell height

      States and variants

      The shell has expanded, collapsed, hidden, and mobile-open states. State management belongs to the host application because it often persists user preference and coordinates routing. The preview uses a small documentation-only controller.

      Accessibility

      Use landmark elements (aside, nav, main, header) and name each navigation region. The navigation toggle needs aria-expanded and a label that changes with state. When mobile navigation is modal, pair this layout with the Drawer behavior for focus containment.