What Is a Template Component?
A template component is a piece of interface you build once and place as many instances of, anywhere across your applications. Every instance stays linked to the original: publish a change to the source component, and every instance updates with it.
Think of it as one source component and its many instances:
The source is the component itself, edited in its own builder. There is exactly one.
An instance is a placement of that source on a page. There can be any number, on any page, and each one can be configured differently.
The relationship is a live link, not a copy. An instance renders the source's content directly rather than duplicating it, so a fix or design tweak made once on the source shows up in every instance as soon as you publish the source.
Why Use Template Components
Consistency by construction. A metric card, a page header, or a product tile designed once looks and behaves the same everywhere — because everywhere is the same component.
One place to change. Fix a spacing bug or restyle a button on the source, and every instance across every application picks it up. No find-and-replace across pages.
Configurable per placement. Each instance can receive different data through the inputs the component exposes, fill the open areas the component leaves for content, and tweak the handful of child pieces the author allowed — without forking the component.
How It Works
Building and using a template component are two distinct jobs, typically done by different people:
The author builds the source. They create the component in its own builder, lay out blocks, wire data and logic, and decide what consumers are allowed to configure — inputs, slots, events, and overridable child pieces.
Consumers place instances. On any page, drop an instance, feed it data through its inputs, fill its slots with your own blocks, and go. You never see the component's internals — only the configurable surface the author exposed.
What an instance can configure
| Panel | What it does | Appears when |
| Inputs | Feed named, typed values into the component (title, record, flag, etc.) | The component declares at least one input (prop) |
| Slots | Drop your own blocks into the open areas the component left for content | The component contains at least one Slot block |
| Child components | Override specific properties of designated child pieces per instance | The author marked at least one child as overridable |
The Template Component Library
Template components are managed in their own library: open Applications → Template components. The page lists your team's components as cards under Custom templates.
Search template — find a template by name. You can also press ⌘K (Ctrl+K on Windows).
Create template — start a new one. See Creating a Template Component.
Each card's menu offers Open in Builder, Edit Details, Clone, Share and Delete. See Managing Template Components.
In any app's builder, your template components appear in the component picker under the Template components tab. Add one like any other component, then set its props and fill its slots.
Template Components vs. Modules
Aspect | Template Component | Module |
|---|---|---|
Granularity | Single component — a card, a header, a tile | A whole page-sized sub-app — a flow, a panel, a navigation bar |
Multiple pages? | Yes — a component can have multiple internal pages for distinct states/views | No — a module is a single design surface |
Sharing across apps | Yes — via the template component library | Yes — as a published global module |
I/O contract | Props (inputs), output, outbound/inbound events, slots, child overrides | Inputs, output record, outbound/inbound events |
Use when | Reusing a component — a card, a header, a form field pattern | Reusing a whole slice of app functionality |
See Modules Overview for the module side of this comparison.
Trade-offs & Gotchas
Instances are live — not frozen snapshots. A redesign of the source is a redesign of every instance at once. Treat the source like shared code: test changes knowing every placement inherits them.
You can't edit an instance's internals from the consuming page. The inner content renders as a preview on the consuming page. To change what's inside, edit the source; to make an allowed per-instance tweak, use the Child components panel.
A component that contains itself hits a depth limit. Instances can nest, but past a fixed depth (16 levels) the deepest instance shows an error placeholder rather than rendering. This guards against circular nesting.
Pages in This Section
Creating a Template Component — where they live, how to start a new one, the author's builder
Inputs, Slots & Overrides — the configurable surface: props, slot content, and per-instance child overrides
Managing Template Components — publishing changes and managing templates from their cards
Related Pages
Modules Overview — reuse at the page/sub-app level
Slots Overview — the general slot concept