Start a template

Help others build apps faster and share a consistent visual language by turning your UI idea into a full page or page section.

What a template is

Unlike a component, a template becomes app code: an app copies it into its own code and adapts it to its product.

A component stays a package dependency and updates with the package. A copied template does not, so updating the package never rewrites the app's copy.

bash
# How an app finds a template and copies it
npx astryx template --list
npx astryx template acme-dashboard src/app/dashboard

Why share one

Templates help other people build apps faster while keeping a consistent visual language across products. Share one when people need more than one component to get started: a template brings the right components, layout, content structure, and interaction wiring already assembled.

Do not turn a product-specific page into a rigid component only to share its structure. Share it as a template and let each app adapt its copy.

Choose a page or block

KindUse it for
PageA complete screen, such as a dashboard, settings page, or checkout flow.
BlockA smaller section that fits inside a page, such as a hero, form, or data panel. A block can also be the example or showcase for a component.

Pick a template id

Choose a stable lowercase kebab-case id, such as acme-dashboard. The id becomes the source and doc file name, the package export, and the value apps pass to astryx template. To change a label, edit the doc (astryx docs cli/integrations/building-blocks/templates/document-the-template/template-doc-overview); never rename the id.

bash
# See the Core ids
npx astryx --json template --list --package @astryxdesign/core

Run the add command

Pages are the default. Pass --type block to add a block.

bash
npx astryx integration add template acme-dashboard
npx astryx integration add template acme-stat-card --type block
text
template contribution added
​
[ok] acme-dashboard
​
Declare template root ./templates in astryx.integration.mjs.
​
- templates/acme-dashboard.doc.mjs
- templates/acme-dashboard.tsx
- package.json
- astryx.integration.mjs

The command writes templates/<id>.tsx for the UI and templates/<id>.doc.mjs for its metadata, and declares the templates directory in astryx.integration.mjs. When package.json has an exports map, it also adds the ./templates/<id> export (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/export-template-assets).

It never overwrites an existing source or doc file. Add --dry-run to see every planned write first.