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 itnpx astryx template --listnpx astryx template acme-dashboard src/app/dashboard
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
| Kind | Use it for |
|---|---|
| Page | A complete screen, such as a dashboard, settings page, or checkout flow. |
| Block | A 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.
- Start with your product or package name, then name the reusable pattern, so the id stays distinct from Core and other integrations.
- Do not end the id with
-page,-app,-view, or-screen. - Do not reuse a Core id by accident: the bare id becomes ambiguous in every app that installs your package. To take over a Core template on purpose, declare
replaces(astryx docs cli/integrations/building-blocks/templates/document-the-template/replace-a-core-template).
bash# See the Core idsnpx astryx --json template --list --package @astryxdesign/core
Run the add command
Pages are the default. Pass --type block to add a block.
bashnpx astryx integration add template acme-dashboardnpx astryx integration add template acme-stat-card --type block
texttemplate contribution added[ok] acme-dashboardDeclare 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.