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

      • Installation

      A3S UI is published on npm. Install the stable package from the registry; GitHub installs remain useful only when testing unreleased source changes.

      Package installation

      Install the package

      npm
      npm install @a3s-lab/ui@0.4.1
      pnpm
      pnpm add @a3s-lab/ui@0.4.1
      bun
      bun add @a3s-lab/ui@0.4.1

      Import Tailwind and A3S UI

      @import "tailwindcss";
@import "@a3s-lab/ui";

      The default export includes base tokens, every component, and the A3S style pack. Load it after Tailwind so a later preflight does not reset component boundaries or controls.

      Load interactive components

      Most components are CSS-only. Import the complete runtime when the application uses menus, select, tabs, split panes, or other interactive composites.

      import "@a3s-lab/ui/all";

      Or import the runtime once and only the controllers you use.

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/app-shell";
import "@a3s-lab/ui/tabs";
import "@a3s-lab/ui/split-pane";
import "@a3s-lab/ui/task-workspace";

      Use semantic markup

      <header class="workspace-header">
  <div data-workspace-identity>
    <h1>Production gateway</h1>
    <span>Configuration saved</span>
  </div>
  <div data-workspace-actions>
    <button type="button" class="btn">Deploy</button>
  </div>
</header>

      CSS imports

      ImportContents
      @a3s-lab/uiDefault complete A3S bundle
      @a3s-lab/ui/a3sComplete A3S bundle, explicit name
      @a3s-lab/ui/{style}Complete vega, nova, maia, lyra, mira, luma, sera, or rhea bundle
      @a3s-lab/ui/baseTokens, semantic utilities, and component structure without visual style
      @a3s-lab/ui/componentsAll component structure without base or visual style
      @a3s-lab/ui/components/button.cssOne component's structure
      @a3s-lab/ui/styles/a3s.cssA3S visuals and foundations; combine with base
      @a3s-lab/ui/compatOptional legacy compatibility aliases

      Split imports

      Use split imports when application CSS already owns its dependency graph.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/components/app-shell.css";
@import "@a3s-lab/ui/styles/a3s.css";

      JavaScript imports

      ImportController
      @a3s-lab/ui/allRuntime and all auto-initialized controllers except Chart
      @a3s-lab/ui/runtimeShared lifecycle and registry
      @a3s-lab/ui/accordionAccordion enhancement
      @a3s-lab/ui/app-shellDesktop navigation and contained compact drawer
      @a3s-lab/ui/bulk-action-barSelected-item scope, pending actions, and completion
      @a3s-lab/ui/code-editorNative Code Editor fallback
      @a3s-lab/ui/comboboxCombobox
      @a3s-lab/ui/commandCommand palette
      @a3s-lab/ui/context-menuPointer and keyboard Context Menu
      @a3s-lab/ui/data-gridData sorting and selection state
      @a3s-lab/ui/device-simulatorResponsive iframe and native device-preview bridge
      @a3s-lab/ui/drawerDrawer
      @a3s-lab/ui/dropdown-menuDropdown Menu
      @a3s-lab/ui/filter-barSegmented filters and active conditions
      @a3s-lab/ui/file-explorerFile selection, filtering, actions, and inline rename
      @a3s-lab/ui/popoverPopover
      @a3s-lab/ui/rangeRange input visual state
      @a3s-lab/ui/selectSelect
      @a3s-lab/ui/sidebarSidebar
      @a3s-lab/ui/split-paneResizable Split Pane
      @a3s-lab/ui/tabsTabs and Ribbon navigation
      @a3s-lab/ui/task-workspaceResponsive task inspector and focus return
      @a3s-lab/ui/toastToast
      @a3s-lab/ui/chartChart helper; Chart.js remains separate

      The public runtime namespace is window.a3sUI. It initializes registered components on page load and observes newly inserted DOM.

      window.a3sUI.initAll();
window.a3sUI.initAll({ force: true });
window.a3sUI.refresh(document.querySelector(".split-pane"));

      Dockview layout integration

      Install the Dockview 8.1 MIT package and the host-framework adapter when an application needs a dockable workspace. This integration is separate from the 116 semantic components and does not enter the default CSS or JavaScript runtime.

      npm install @a3s-lab/ui dockview@8.1.0
npm install dockview-react@8.1.0 react react-dom # React
npm install dockview-vue@8.1.0 vue             # Vue
      ImportContents
      @a3s-lab/ui/dockviewVanilla Dockview, Gridview, Splitview, and Paneview APIs, A3S theme, and layout persistence
      @a3s-lab/ui/dockview/reactComplete React API plus useDockviewLayout, useGridview, useSplitview, and usePaneview
      @a3s-lab/ui/dockview/vueComplete Vue 3 API and matching composables
      @a3s-lab/ui/dockview/cssDockview base styles and A3S light/dark theme variables

      See Dock Workspace for complete capability and licence boundaries.

      Server-rendered templates

      Optional Nunjucks and Jinja templates ship with the package.

      Nunjucks
      cp -R node_modules/@a3s-lab/ui/templates/nunjucks ./templates/a3s-ui
      Jinja
      cp -R node_modules/@a3s-lab/ui/templates/jinja ./templates/a3s-ui

      See Templates for macro parameters.

      Semantic and framework adapters

      The package also ships a machine-readable component manifest, a small DOM annotation runtime, and optional React and Vue element adapters. These entrypoints preserve the same semantic HTML contract; they do not contain application state, task transport, or product logic.

      import { a3sAI } from "@a3s-lab/ui/ai";
import manifest from "@a3s-lab/ui/components.json" with { type: "json" };

a3sAI.scan(document);
console.log(manifest.components.length); // 116

      React and Vue are optional peer dependencies. Install only the framework used by the host application, then import components from @a3s-lab/ui/react or @a3s-lab/ui/vue.

      See Integration for native HTML, React, Vue, manifest, selector, snapshot, and deterministic test examples.

      Icons

      Icons are deliberately not bundled. Documentation examples use inline Lucide-compatible SVG, but applications may use any icon system. Icon-only controls always need an accessible name.