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.2.0
      pnpm
      pnpm add @a3s-lab/ui@0.2.0
      bun
      bun add @a3s-lab/ui@0.2.0

      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/tabs";
import "@a3s-lab/ui/split-pane";

      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/comboboxCombobox
      @a3s-lab/ui/commandCommand palette
      @a3s-lab/ui/drawerDrawer
      @a3s-lab/ui/dropdown-menuDropdown Menu
      @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/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"));

      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.

      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.