---
title: "Component catalog"
url: https://developers.dagio.ai/components/
---

# Component catalog

   
                          
                                                                         
                  
                
          
   

## One shared catalog

The catalog describes available components and their property schemas. Users, Studio and AI rely on the same definitions. Rich widgets do not need to introduce separate storage or permissions.

| Family       | Components / expected values           | Purpose                       |
| ------------ | -------------------------------------- | ----------------------------- |
| Organization | Containers, sections, stacks and cards | Compose a readable hierarchy  |
| Identity     | Heading, text, badge, avatar, icon     | Recognize objects and status  |
| Fields       | Typed controls, choices and references | Read and edit declared values |
| Collections  | Table, list and cards                  | Explore Query results         |
| Relations    | Selector and relation groups           | Link and open objects         |
| Content      | Document, Code, Canvas and Asset       | Use native editors            |
| Work         | Actions, steps and results             | Advance and monitor a Flow    |

## Inspect a component entry

Before using a component, check required properties, available values, admitted children and events. Data components also need their binding or source. A visual title is not a business identity; a confirmation button must reference an Action.

`RecordLayout` arranges two explicitly declared `Stack` children, main content then supporting information. Its required `asideWidth` preset selects a standard or compact right panel; the regions stack on smaller screens. It does not add a Card around either region. [Compose the record](https://developers.dagio.ai/composition/#arrange-main-content-and-related-information) for the complete placement rules.

Check the exact catalog family recorded by the Model, not a software package version. The reference lists which families admit each component; a newer catalog does not silently change an existing Model or its data.

## The Surface reference

`Header` arranges page identity and actions using exactly two declared `Stack` children, in that order. It has no properties or events and creates no surrounding Card. An empty actions region still retains its Stack. This layout belongs to catalog family `0.5.15`; its listing does not add it to the current default family or to an older Model. The [composition guide](https://developers.dagio.ai/composition/#arrange-page-identity-and-actions) explains its use without changing the underlying Actions or native editor.

The [Surface component reference](https://developers.dagio.ai/surface-components/) describes primitives and business widgets: Fields, settings, relations, native content, Query views and Actions. It exposes properties and events from the Surface catalog.

Choose a component for the information it presents: `RecordField` for an editable Field, `RecordSettings` for record settings, `QueryTable` for a collection and `ModelAction` for a command. Each reference entry specifies its properties, expected values and available events.

## Example

On a Client record, a card presents identity, a section holds Notes, a control selects Status and a relation group displays quotes. Composition brings these uses together without turning quotes into client text Fields.

## Tabs and Action groups

`Tabs` and its `TabPanel` components organize a record without closing its editor or losing input
when a panel is hidden. The Model chooses the keys, labels, order and initial tab. Each panel keeps
its components mounted; the composition contains only one native editor.

`ActionGroup` presents at most one primary Action, secondary Actions and a menu. Every entry names
a declared Action and retains its preparation, permissions and confirmation. These components
belong to an explicit catalogue family; an existing application does not acquire them through a
silent version change.

<!-- surface-examples:start -->

## Applied examples : Choose each component for its role

The Field edits Notes; the table presents quotes from a relation group.

### Configuration

Component properties `RecordField.props`. [Properties and accepted values](https://developers.dagio.ai/surface-components/#recordfield).

```json
{
  "recordProfileKey": "client",
  "fieldPath": "fields/notes"
}
```

### Variation and connection

Component properties `QueryTable.props`. [Properties and accepted values](https://developers.dagio.ai/surface-components/#querytable).

```json
{
  "binding": {
    "kind": "record-relations",
    "recordProfileKey": "client",
    "groupKey": "quotes"
  }
}
```

### UI layout example

The illustrative layout below places this configuration in the Clients/Quotes app. Insert each fragment at the stated location, with Field, Query and Action references matching the Model declarations.

1. Client identity
2. Notes and follow-up
3. Settings
4. Linked quotes

<!-- surface-examples:end -->