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

      • Component overview

      A3S UI provides 116 public component contracts. Search by display name, localized name, route slug, or interface responsibility; results preserve the current language and documentation version.

      Find components by interface job

      Start with the interface job, or search directly when you know the name.

      116 components
      9 task groups across 116 searchable components

      Actions and input

      12 components

      Create, edit, and submit with actions, fields, and text entry.

      Button按钮Actions and inputButton Group按钮组Actions and inputBulk Action Bar批量操作栏Actions and inputCopy Button复制按钮Actions and input

      Selection and filtering

      12 components

      Choose and narrow values while preserving native state wherever possible.

      Native Select原生选择器Selection and filteringSelect选择器Selection and filteringCombobox组合框Selection and filteringFilter Bar筛选栏Selection and filtering

      Navigation and wayfinding

      8 components

      Move through pages, hierarchy, and scroll position without losing context.

      Activity Bar活动栏Navigation and wayfindingBreadcrumb面包屑Navigation and wayfindingBack to Bottom回到底部Navigation and wayfindingTabs标签页Navigation and wayfinding

      Application structure

      14 components

      Structure shells, toolbars, panes, durable regions, and appearance controls.

      App ShellApp Shell 应用外壳Application structureApp Page应用页面Application structureCatalog能力目录Application structureSetting Row设置行Application structure

      Overlays and menus

      10 components

      Handle menus and layered, positioned, or focus-protected interaction.

      Alert Dialog警报对话框Overlays and menusDialog对话框Overlays and menusDrawer抽屉Overlays and menusDropdown Menu下拉菜单Overlays and menus

      Feedback and status

      9 components

      Explain loading, status, outcomes, exceptions, and recovery.

      Alert警报Feedback and statusBadge徽章Feedback and statusStatus Badge状态徽章Feedback and statusEmpty空状态Feedback and status

      Content and media

      13 components

      Present prose, media, code, and reusable content surfaces.

      Accordion折叠面板Content and mediaCollapsible折叠内容Content and mediaAvatar头像Content and mediaIcon图标Content and media

      Data display

      8 components

      Organize collections, properties, progressions, and quantitative data.

      Chart图表Data displayProperty List属性列表Data displayData Grid数据网格Data displayTable表格Data display

      Harness

      30 components

      Cover task input, conversation, files, execution approval, review evidence, and development preview.

      Task Start任务启动页Task and inputTask Workspace任务工作区Task and inputTask Composer任务输入器Task and inputContext Selector上下文选择器Task and input

      Choosing a component

      • Prefer native elements for actions, input, and selection so the browser owns focus, form state, and accessibility.
      • Add a component runtime only when the platform does not provide the complete behavior, such as composite selection, resizable panes, or device previews.
      • Page shells, toolbars, and resource layouts provide workspace structure. They do not replace smaller input or feedback components.
      • Task, execution, review, and developer-tool components live in Harness; each one keeps its stable /components/* page URL.

      Structured forms

      The Form system brings the deterministic Form Core, visual Designer, controlled Renderer, 23 built-in fields, complex collection fields, and durable interaction contracts into the same component information architecture. React Hook Form bindings and Vue composables use the same schema, validation, and submitted-value semantics, with interactive examples embedded directly in the component guides.

      API model

      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%
      JavaScriptBehavior the browser does not provideSplit-pane resizing, device preview, and composite keyboard interaction

      Native elements remain the source of truth. A disabled button uses disabled; it does not require a second library-owned state value.

      Framework integration

      HTML is the public contract for every component. The React and Vue adapters reuse the same semantic root without adding wrappers. A component gets a dedicated hook or composable only when it exposes events or methods. Each component page lists the interfaces that actually exist instead of placeholder APIs.

      CapabilityGeneral componentsApplication structureHarness
      Semantic HTMLRequiredRequiredRequired
      React and VueSemantic-root adapterSemantic-root adapterSemantic-root adapter
      Hook or composableWhen behavior APIs existWhen behavior APIs existWhen behavior APIs exist
      Light and dark themesSupportedSupportedSupported
      RTL logical layoutSupportedSupportedSupported
      Responsive layoutComponent-specificBuilt inWorkflow-specific
      Nunjucks and JinjaExisting templatesHTML compositionHTML composition

      Choose the A3S style pack for new products. Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea are reserved for applications that must preserve an established appearance.