---
title: "SurfaceCompositionSchema · types"
url: https://developers.dagio.ai/reference/types-surface-composition/
---

# SurfaceCompositionSchema · types

   
                                         
                                                                                   
                                           
                  
           
          
   

The following types define named objects and their relationships. Tables include inherited properties. Schema-derived types refer to their validated structures; a TypeScript declaration does not replace the compiler’s semantic checks.

## SurfaceModelComposition

A detached closed spec contains declarations, not runtime values or retained authority.

```typescript
export type SurfaceModelComposition = z.infer<typeof surfaceCompositionSpecSchema>;
```

## SurfaceComposition

Concise name for the same sole compiled composition contract.

```typescript
export type SurfaceComposition = SurfaceModelComposition;
```

## SurfaceCompositionElement

Renderer narrowing uses this exact admitted union without assertions or schema copies.

```typescript
export type SurfaceCompositionElement = z.infer<typeof surfaceCompositionElementSchema>;
```

## SurfaceCompositionComponentName

A bundle advertises only the adapters it actually implements.

```typescript
export type SurfaceCompositionComponentName = SurfaceCompositionElement['type'];
```

```typescript
type SurfaceCompositionComponentName = "HomeHeader" | "HomeLaunchers" | "HomeLayout" | "HomeSection" | "HomeActivity" | "Page" | "Section" | "Stack" | "Grid" | "Card" | "Heading" | "Text" | "Badge" | "Icon" | "RecordIdentity" | "RecordField" | "RecordSettings" | "RecordTags" | "RecordMetric" | "RecordRelations" | "NativeContent" | "QueryTable" | "RecordCards" | "QueryGraph" | "QueryKanban" | "QueryGantt" | "QueryTimeline" | "QueryCalendar" | "ModelAction" | "RecordLayout" | "Tabs" | "TabPanel" | "ActionGroup" | "Header" | "WorkIdentity" | "WorkNavigation" | "WorkPanel" | "WorkStageRail" | "WorkTargetContent" | "WorkSources" | "WorkRequests" | "WorkCriteria" | "WorkAction";
```

## SurfaceCompositionComponentProps

Precise props of the registered native adapter.

```typescript
export type SurfaceCompositionComponentProps<K extends SurfaceCompositionComponentName> = Extract<
  SurfaceCompositionElement,
  { type: K }
>['props'];
```

[All references](https://developers.dagio.ai/reference/)

<!-- 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 -->