The Component Model

A page's components array is a tree. Every entry has a type — one of 90 built-in component types — and a set of properties. Components do not each invent their own vocabulary: they compose from a small set of shared modules, so the same cross-cutting properties mean the same thing everywhere they appear.

components:
  - type: container
    props: { className: 'max-w-4xl mx-auto' }
    children:
      - { type: text, element: h1, content: 'Tasks' }
      - type: data-table
        dataSource: { table: tasks }

Shared Modules

props and children are universal. The rest are opt-in per type: a divider carries props and children and nothing else, while a hero adds content, interactions, responsive, visibility and i18n. Each reference page states what its components actually accept.

Reference Substitution

content and props values resolve four reference families at render time:

$record.<field> (the bound record), $vars.<key> (page variables), $currentUser.<path> (session context), and $t:<key> (translations). A page rendered from markdown adds $frontmatter.*. See Data Binding for what each resolves to.

Categories

The 90 types are documented by category, each on its own page.

Related Pages

• Reusable Components — defining a template once and instantiating it with $ref.
• Pages Overview — where the components array lives.
• Data Binding — the dataSource module.
• Interactions — the interactions and action modules.
• Responsive Design — the responsive module.
• Theme — the tokens component styling consumes.