The Component Model

A page's components array is a tree. Every entry has a type — one of 96 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, tag: h1, content: 'Tasks' }
      - type: data-table
        dataSource: { table: tasks }

Shared Modules

Module	Present on	What it does
props	Every component	Key-value bag rendered as HTML attributes — className, variant, and component-specific keys.
children	Every component	Nested component definitions, or plain strings. Arbitrary depth.
content	Content and layout	Inline text or markdown, with reference substitution.
dataSource	Data-bound components	Binds to a table or a system endpoint. See Data Binding.
visibility	Most components	Conditional display based on auth state.
responsive	Most components	Per-breakpoint property overrides.
interactions	Interactive components	Click, hover, scroll and entrance behavior. See Interactions.
action	Form and button components	What running the component does — crud, auth, navigate, automation.
i18n	Content components	Per-language content variants.

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 96 types are documented by category, each on its own page.

Category	Types
Layout	hero, container, flex, grid, responsive-grid, card, sidebar, modal, split-pane, tab-panel
Structural	divider, spacer
Content	text, code, icon, toc, pageSearch, searchInput
Media	image, video, audio, iframe, carousel, aspect-ratio
Display	accordion, command, empty-state, list-item, record-field, resizable, scroll-area, speech-bubble, static-table, tabs, timeline
Navigation	navigation-menu, dropdown-menu, context-menu, menubar, breadcrumb, pagination
Overlays	dialog, alert-dialog, drawer, record-drawer, popover, hover-card, tooltip, toast
Feedback	progress, spinner, skeleton
Interactive	button, button-group, link, alert, badge, theme-toggle
Data	data-table, list, gallery, kanban, calendar, chart, kpi, data-timeline, data-form, form
Form Controls	input, textarea, select, combobox, checkbox, radio-group, switch, toggle, toggle-group, field
Advanced Controls	slider, date-picker, time-picker, number-input, file-upload, input-otp
Specialty	wizard, reorderable-list, language-switcher, status-indicator
Social	comments, commentCount, ai-chat
Custom	customHTML

Related Pages

• 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.