Add a Template

Templates are curated project starters: a starter, a layout, and a set of feature packs pre-wired together, plus a custom theme and extra pages. The template command installs one into an existing Hype Stack project.

Prerequisite

Templates go on top of a Hype Stack project, so scaffold one first:

npx @hype-stack/cli create my-app
cd my-app

create clones the base template (the empty canvas). You then layer a template on with the template command.

Usage

Install a template by id:

npx @hype-stack/cli template better-studio

Omit the id to pick interactively:

npx @hype-stack/cli template

The command expands the template into its starter and layout slot variants plus its fixed feature packs, installs them like a normal compose, then layers the template's frontend overrides (landing page, custom theme, re-skinned auth screens, and so on) on top so the template owns those paths.

Swapping slot variants

A template names a pack family for each slot rather than a concrete pack, so you can swap variants at install time. Pick interactively, or preselect with --variants:

npx @hype-stack/cli template better-studio --variants starter-saas=starter-saas-betterauth,layout=layout-basic

Adding extra packs

Add feature packs that fall outside the template's own scope with --packs:

npx @hype-stack/cli template better-studio --packs pack-notifications,pack-projects

Overriding the template's look

Every template ships a canonical theme, corner radius, and color mode. Those preselect the pickers during install, and these flags override them outright, which is how the preview site's copy-command button reproduces the combination you were looking at:

npx @hype-stack/cli template better-studio --packs pack-teams --theme ocean --radius 1rem --mode dark

The admin app, mobile app, and browser extension all follow the frontend unless you say otherwise with their own flags (--admin-theme, --mobile-theme, --extension-theme, and the matching -radius flags).

Flags

Running in CI

There is no credential flag. Create an API key on the API keys page and pass it as an env var:

HYPE_STACK_TOKEN=hsk_ci_xxx npx @hype-stack/cli template better-studio --yes

HYPE_STACK_TOKEN takes priority over whatever npx @hype-stack/cli login stored locally, so the same command works on your machine and on a runner.

Available templates

The free template does not include paid provider integrations such as WorkOS auth, Stripe billing or Sentry. Paid packs are installed and licensed separately.

After install

The template and its packs are recorded in stack.json:

{
  "template": "better-studio",
  "installedPacks": ["starter-saas-betterauth", "layout-glass", "pack-billing-stripe"]
}

Templates are starting points, not constraints. Once installed, you own all the code. Modify routes, swap providers, restructure the layout. Nothing is locked.

The template's copy lands in messages/en.json on top of what its packs contributed, so the app name and any wording the template rephrases win. Adding a language is the same as for a plain pack install: see Translations.

Add more packs on top at any time:

npx @hype-stack/cli compose

At the end of a template or compose run the CLI offers to walk you through onboard, which fills in any new env vars the template and its packs need. You can also run it yourself later.