Component Gallery¶

This page showcases all standard A2UI components with examples and usage patterns. For the complete technical specification, see the Standard Catalog Definition.

Layout Components¶

Row¶

Horizontal layout container. Children are arranged left-to-right.

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": {"explicitList": ["btn1", "btn2", "btn3"]},
      "alignment": "center"
    }
  }
}

Properties:

children: Static array (explicitList) or dynamic template
distribution: Horizontal distribution of children (start, center, end, spaceBetween, spaceAround, spaceEvenly)
alignment: Vertical alignment (start, center, end, stretch)

Column¶

Vertical layout container. Children are arranged top-to-bottom.

{
  "id": "content",
  "component": {
    "Column": {
      "children": {"explicitList": ["header", "body", "footer"]}
    }
  }
}

Properties:

children: Static array (explicitList) or dynamic template
distribution: Vertical distribution of children (start, center, end, spaceBetween, spaceAround, spaceEvenly)
alignment: Horizontal alignment (start, center, end, stretch)

Display Components¶

Text¶

Display text content with optional styling.

{
  "id": "title",
  "component": {
    "Text": {
      "text": {"literalString": "Welcome to A2UI"},
      "usageHint": "h1"
    }
  }
}

usageHint values: h1, h2, h3, h4, h5, caption, body

Image¶

Display images from URLs.

{
  "id": "logo",
  "component": {
    "Image": {
      "url": {"literalString": "https://example.com/logo.png"}
    }
  }
}

Icon¶

Display icons using Material Icons or custom icon sets.

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": {"literalString": "check_circle"}
    }
  }
}

Divider¶

Visual separator line.

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

Interactive Components¶

Button¶

Clickable button with action support.

{
  "id": "submit-btn-text",
  "component": {
    "Text": {
      "text": { "literalString": "Submit" }
    }
  }
}
{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-btn-text",
      "primary": true,
      "action": {"name": "submit_form"}
    }
  }
}

Properties: - child: The ID of the component to display in the button (e.g., a Text or Icon). - primary: Boolean indicating if this is a primary action. - action: The action to perform on click.

TextField¶

Text input field.

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": {"literalString": "Email Address"},
      "text": {"path": "/user/email"},
      "textFieldType": "shortText"
    }
  }
}

textFieldType values: date, longText, number, shortText, obscured

Boolean toggle.

{
  "id": "terms-checkbox",
  "component": {
    "Checkbox": {
      "label": {"literalString": "I agree to the terms"},
      "value": {"path": "/form/agreedToTerms"}
    }
  }
}

Container Components¶

Card¶

Container with elevation/border and padding.

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

Overlay dialog.

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

Tabs¶

Tabbed interface.

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        {"title": {"literalString": "General"}, "child": "general-settings"},
        {"title": {"literalString": "Privacy"}, "child": "privacy-settings"},
        {"title": {"literalString": "Advanced"}, "child": "advanced-settings"}
      ]
    }
  }
}

Scrollable list of items.

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      }
    }
  }
}

Common Properties¶

Most components support these common properties:

id (required): Unique identifier for the component instance.
weight: Flex-grow value when the component is a direct child of a Row or Column. This property is specified alongside id and component.

Live Examples¶

To see all components in action, run the component gallery demo:

cd samples/client/angular
npm start -- gallery

This launches a live gallery with all components, their variations, and interactive examples.