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

      • Complex UI.Clear grammar.

      A3S task patterns for app shells, ribbons, split panes, and state models, delivered as semantic HTML with React and Vue adapters plus small vanilla JavaScript controllers.

      Install A3S UI View source
      $npm install @a3s-lab/ui@0.4.1
      64
      Component contracts
      06
      Design foundations
      00
      Framework runtimes
      PUBLIC COMPONENT COMPOSITIONINTERACTIVE A3S OFFICE WORKBENCH
      A3S Office Saved
      P
      Project reviewPresentation, saved just now
      Font
      Paragraph
      Insert
      WORKSPACE / RECENT

      Continue where you left off

      3 recent resourcesSaved
      Light
      90%

      From one control to a complete workspace.

      General components are grouped by interface responsibility. Structured forms and Harness use the same component navigation, visual language, and state contracts. Every guide includes a live specimen.

      Actions and input

      Buttons, fields, forms, and text editing for frequent creation tasks.

      Core interaction07 CONTRACTS
      Navigation and wayfinding

      Activity rails, breadcrumbs, tabs, pagination, sidebars, and scroll position.

      Orientation and wayfinding08 CONTRACTS
      Overlays and menus

      Dialogs, drawers, menus, popovers, commands, and contextual help.

      Layered interaction07 CONTRACTS
      Feedback and status

      Alerts, status badges, progress, skeletons, spinners, and toast feedback.

      Status and feedback09 CONTRACTS
      Content and media

      Prose, cards, images, code, Markdown, and collapsible content.

      Content surfaces12 CONTRACTS
      Application structure

      Shells, headers, toolbars, panes, resource layout, and theme control.

      Application structure12 CONTRACTS
      View all component contracts

      Tune A3S UI to your product.

      Choose appearance, accent, radius, and interface density. Changes apply to the entire site and every component preview immediately, then persist for your next visit.

      Appearance
      Accent
      Radius
      Density
      Semantic HTML
      Browser-native behavior
      Form and Harness
      Responsive + RTL
      Server templates

      One semantic contract. Multiple visual foundations.

      Color, type, and shape can change while component structure, interaction state, and accessible behavior stay intact.

      ACTIONSUCCESSAGENTATTENTIONDANGER
      TYPE SCALEAa

      Geist Sans

      12 / 14 / 16 / 20 / 32 / 64
      SPACING SCALE4812162432
      CONTROL SHAPER06 / R10 / R14

      Three non-negotiables.

      Use the platform

      Native controls and semantic landmarks come first. JavaScript appears only when the browser does not supply the interaction.

      Keep one contract

      CSS variables and documented data attributes adapt the interface without forking structure or accessibility behavior.

      Design for dense work

      Compact chrome, predictable focus, and responsive workspaces keep complex product surfaces legible.

      Start with a real interface.

      Install @a3s-lab/ui, choose a visual foundation, then copy working markup from App Shell, Form, Harness, or any component contract.

      View installation Browse component contracts