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: change 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 simultaneously.
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, accessible from the Applications area. The library shows:
Standard tab — platform-provided components
Custom templates tab — your team's own components
Search with Search template. Each card offers Edit Details, Clone, Share, and Delete.
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 |
| Per-instance configuration | Inputs, slots, child overrides | Inputs only |
| Use when | Reusing a component — a card, a header, a form field pattern | Reusing a whole slice of app functionality |
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.
Frequently Asked Questions
What's the difference between a template component and a module?
A template component is a single reusable component — a card, a header, a metric tile. A module is a whole sub-app with its own canvas and pages — a checkout flow, a settings panel, a navigation bar. Use a template component when you're reusing a component-sized piece; use a module when you're reusing a page-sized slice.
Can I edit a template component instance's internals from a consuming page?
No. The inner content renders as a preview on the consuming page — you can't click into it and edit the blocks directly. To change the component itself, edit the source. To make a per-instance tweak within the allowed surface, use the instance's Child components panel.
Can I use a template component across different applications?
Yes. Template components are shared from a central library accessible across the workspace. Any app can add them from the component picker's Template components tab.
Does every instance need to be individually updated after a source change?
No. Every instance is a live view of the source — there is no per-instance copy to update. A change to the source propagates to every instance immediately after you save and publish the component.
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
Related Pages
Modules Overview — reuse at the page/sub-app level
Slots Overview — the general slot concept