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/components/index.md.
A3S UI
  • English
  • next

      • Component catalog

      A3S UI combines semantic primitives with reusable application patterns. Every component page includes a live preview, minimal HTML, supported parameters, meaningful states, and accessibility guidance.

      Live previewHTML · CSS · JavaScript
      02

      Actions

      Buttons and grouped commands.

      12

      Forms

      Fields, inputs, choices, and selection.

      26

      Primitives

      Navigation, overlays, feedback, and data.

      10

      Patterns

      Shells, workspaces, ribbons, panes, and status.

      API model

      A3S UI keeps parameters close to the browser platform:

      API surfacePurposeExample
      Root classSelects the componentclass="resource-card"
      Native attributesBehavior and accessibilitydisabled, checked, aria-current="page"
      data-* attributesFinite visual or behavioral variantsdata-size="sm", data-orientation="vertical"
      CSS custom propertiesContinuous layout values and theme decisions--split-position: 40%
      Vanilla JavaScriptBehavior the browser does not provideSplit-pane pointer and keyboard resizing

      Native elements remain the source of truth. A disabled button uses disabled; it does not require a library-specific boolean. State reflected with ARIA is both accessible and styleable.

      Groups

      Actions

      Button · Button Group

      Forms

      Field · Input · Input Group · Textarea · Native Select · Select · Checkbox · Radio Group · Switch · Slider · Label · Combobox

      Activity Bar · Breadcrumb · Tabs · Pagination · Sidebar

      Overlays

      Alert Dialog · Dialog · Drawer · Dropdown Menu · Popover · Command · Tooltip

      Feedback

      Alert · Badge · Empty · Progress · Skeleton · Spinner · Toast

      Data display

      Accordion · Avatar · Card · Chart · Item · Kbd · Table

      Application patterns

      App Shell · Workspace Header · Toolbar · Ribbon · Settings Layout · Resource Card · Split Pane · Task Pane · Status Bar · Resource Workbench

      Support matrix

      CapabilityPrimitivesApplication patterns
      Semantic HTMLRequiredRequired
      Light and dark themesYesYes
      RTL logical layoutYesYes
      Responsive layoutComponent-specificBuilt in
      Nunjucks and JinjaExisting primitive templatesHTML composition
      JavaScript dependencyOnly interactive compositesSplit Pane only

      Choose the A3S style pack for the Office-derived visual language. The inherited Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea packs remain available for A3S UI-compatible applications.