---
title: Component
description: Component protocol schemas
---

{/* ⚠️  AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs go in content/docs/guides/. */}

Empty Properties Schema

<Callout type="info">
**Source:** `packages/spec/src/ui/component.zod.ts`
</Callout>

## TypeScript Usage

```typescript
import { AIChatWindowProps, ElementButtonProps, ElementFilterProps, ElementImageProps, ElementNumberProps, ElementRecordPickerProps, ElementTextProps, PageAccordionProps, PageCardProps, PageHeaderProps, PageTabsProps, RecordActivityProps, RecordChatterProps, RecordDetailsProps, RecordHighlightsField, RecordHighlightsProps, RecordPathProps, RecordRelatedListProps } from '@objectstack/spec/ui';
import type { AIChatWindowProps, ElementButtonProps, ElementFilterProps, ElementImageProps, ElementNumberProps, ElementRecordPickerProps, ElementTextProps, PageAccordionProps, PageCardProps, PageHeaderProps, PageTabsProps, RecordActivityProps, RecordChatterProps, RecordDetailsProps, RecordHighlightsField, RecordHighlightsProps, RecordPathProps, RecordRelatedListProps } from '@objectstack/spec/ui';

// Validate data
const result = AIChatWindowProps.parse(data);
```

---

## AIChatWindowProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **mode** | `Enum<'float' \| 'sidebar' \| 'inline'>` | ✅ | Display mode for the chat window |
| **agentId** | `string` | optional | Specific AI agent to use |
| **context** | `Record<string, any>` | optional | Contextual data to pass to the AI |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ElementButtonProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **label** | `string` | ✅ | Button display label |
| **variant** | `Enum<'primary' \| 'secondary' \| 'danger' \| 'ghost' \| 'link'>` | ✅ | Button visual variant |
| **size** | `Enum<'small' \| 'medium' \| 'large'>` | ✅ | Button size |
| **icon** | `string` | optional | Icon name (Lucide icon) |
| **iconPosition** | `Enum<'left' \| 'right'>` | ✅ | Icon position relative to label |
| **disabled** | `boolean` | ✅ | Disable the button |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ElementFilterProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **object** | `string` | ✅ | Object to filter |
| **fields** | `string[]` | ✅ | Filterable field names |
| **targetVariable** | `string` | optional | Page variable to store filter state |
| **layout** | `Enum<'inline' \| 'dropdown' \| 'sidebar'>` | ✅ | Filter display layout |
| **showSearch** | `boolean` | ✅ | Show search input |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ElementImageProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **src** | `string` | ✅ | Image URL or attachment field |
| **alt** | `string` | optional | Alt text for accessibility |
| **fit** | `Enum<'cover' \| 'contain' \| 'fill'>` | ✅ | Image object-fit mode |
| **height** | `number` | optional | Fixed height in pixels |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ElementNumberProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **object** | `string` | ✅ | Source object |
| **field** | `string` | optional | Field to aggregate |
| **aggregate** | `Enum<'count' \| 'sum' \| 'avg' \| 'min' \| 'max'>` | ✅ | Aggregation function |
| **filter** | `[__schema0](./__schema0)` | optional | Filter criteria |
| **format** | `Enum<'number' \| 'currency' \| 'percent'>` | optional | Number display format |
| **prefix** | `string` | optional | Prefix text (e.g. "$") |
| **suffix** | `string` | optional | Suffix text (e.g. "%") |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ElementRecordPickerProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **object** | `string` | ✅ | Object to pick records from |
| **displayField** | `string` | ✅ | Field to display as the record label |
| **searchFields** | `string[]` | optional | Fields to search against |
| **filter** | `[__schema0](./__schema0)` | optional | Filter criteria for available records |
| **multiple** | `boolean` | ✅ | Allow multiple record selection |
| **targetVariable** | `string` | optional | Page variable to bind selected record ID(s) |
| **placeholder** | `string` | optional | Placeholder text |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## ElementTextProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **content** | `string` | ✅ | Text or Markdown content |
| **variant** | `Enum<'heading' \| 'subheading' \| 'body' \| 'caption'>` | ✅ | Text style variant |
| **align** | `Enum<'left' \| 'center' \| 'right'>` | ✅ | Text alignment |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## PageAccordionProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **items** | `Object[]` | ✅ |  |
| **allowMultiple** | `boolean` | ✅ | Allow multiple panels to be expanded simultaneously |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## PageCardProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **title** | `string` | optional | Display label (plain string; i18n keys are auto-generated by the framework) |
| **bordered** | `boolean` | ✅ |  |
| **actions** | `string[]` | optional |  |
| **body** | `any[]` | optional | Card content components (slot) |
| **footer** | `any[]` | optional | Card footer components (slot) |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## PageHeaderProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **title** | `string` | ✅ | Page title |
| **subtitle** | `string` | optional | Page subtitle |
| **icon** | `string` | optional | Icon name |
| **breadcrumb** | `boolean` | ✅ | Show breadcrumb |
| **actions** | `string[]` | optional | Action IDs to show in header |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## PageTabsProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **type** | `Enum<'line' \| 'card' \| 'pill'>` | ✅ |  |
| **position** | `Enum<'top' \| 'left'>` | ✅ |  |
| **items** | `Object[]` | ✅ |  |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## RecordActivityProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **types** | `Enum<'comment' \| 'field_change' \| 'task' \| 'event' \| 'email' \| 'call' \| 'note' \| 'file' \| 'record_create' \| 'record_delete' \| 'approval' \| 'sharing' \| 'system'>[]` | optional | Feed item types to show (default: all) |
| **filterMode** | `Enum<'all' \| 'comments_only' \| 'changes_only' \| 'tasks_only'>` | ✅ | Default activity filter |
| **showFilterToggle** | `boolean` | ✅ | Show filter dropdown in panel header |
| **limit** | `integer` | ✅ | Number of items to load per page |
| **showCompleted** | `boolean` | ✅ | Include completed activities |
| **unifiedTimeline** | `boolean` | ✅ | Mix field changes and comments in one timeline (Airtable style) |
| **showCommentInput** | `boolean` | ✅ | Show "Leave a comment" input at the bottom |
| **enableMentions** | `boolean` | ✅ | Enable @mentions in comments |
| **enableReactions** | `boolean` | ✅ | Enable emoji reactions on feed items |
| **enableThreading** | `boolean` | ✅ | Enable threaded replies on comments |
| **showSubscriptionToggle** | `boolean` | ✅ | Show bell icon for record-level notification subscription |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## RecordChatterProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **position** | `Enum<'sidebar' \| 'inline' \| 'drawer'>` | ✅ | Where to render the chatter panel |
| **width** | `string \| number` | optional | Panel width (e.g., "350px", "30%") |
| **collapsible** | `boolean` | ✅ | Whether the panel can be collapsed |
| **defaultCollapsed** | `boolean` | ✅ | Whether the panel starts collapsed |
| **feed** | `Object` | optional | Embedded activity feed configuration |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## RecordDetailsProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **columns** | `Enum<'1' \| '2' \| '3' \| '4'>` | ✅ | Number of columns for field layout (1-4) |
| **layout** | `Enum<'auto' \| 'custom'>` | ✅ | Layout mode: auto uses object compactLayout, custom uses explicit sections |
| **sections** | `string[]` | optional | Section IDs to show (required when layout is "custom") |
| **fields** | `string[]` | optional | Explicit field list to display (optional, overrides compactLayout) |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## RecordHighlightsField

Highlight field: bare name, or `{name,label?,icon?,type?}`

### Union Options

This schema accepts one of the following structures:

#### Option 1

Type: `string`

---

#### Option 2

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **name** | `string` | ✅ | Field name on the record |
| **label** | `string` | optional | Display label (overrides schema label) |
| **icon** | `string` | optional | Icon name (lucide icon key) |
| **type** | `string` | optional | Override cell renderer type (rare) |

---


---

## RecordHighlightsProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **fields** | `string \| Object[]` | ✅ | Key fields to highlight (1-7 fields max, typically displayed as prominent cards). Each item may be a bare field name or `{name, label?, icon?, type?}` for inline overrides. |
| **layout** | `Enum<'horizontal' \| 'vertical'>` | ✅ | Layout orientation for highlight fields |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## RecordPathProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **statusField** | `string` | ✅ | Field name representing the current status/stage |
| **stages** | `Object[]` | optional | Explicit stage definitions (if not using field metadata) |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

## RecordRelatedListProps

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **objectName** | `string` | ✅ | Related object name (e.g., "task", "opportunity") |
| **relationshipField** | `string` | ✅ | Field on related object that points to this record (e.g., "account_id") |
| **columns** | `string[]` | ✅ | Fields to display in the related list |
| **sort** | `string \| Object[]` | optional | Sort order for related records |
| **limit** | `integer` | ✅ | Number of records to display initially |
| **filter** | `Object[]` | optional | Additional filter criteria for related records |
| **title** | `string` | optional | Custom title for the related list |
| **showViewAll** | `boolean` | ✅ | Show "View All" link to see all related records |
| **actions** | `string[]` | optional | Action IDs available for related records |
| **aria** | `Object` | optional | ARIA accessibility attributes |


---

