add <block>

create-saas-starter add installs a block — a folder of composed components and hooks wired to specific starter features — into an app you already generated. Blocks are the reusable pieces that sit on top of features: an upgrade card for billing, an invite dialog for orgs, a usage quota banner.

Run it from the root of a generated app:

npx create-saas-starter add upgrade-card

Listing the catalog

Run add with no block name to list what's available, annotated with each block's status for your app:

npx create-saas-starter add

Available blocks:

  audit-log-card — Recent activity card [needs: audit-log] (requires audit-log)
      A compact dashboard widget listing the org's most recent audit-log entries…
  org-invite-dialog — Org invite dialog [available] (requires orgs)
      A compact dialog for inviting a member to the active org…
  quota-banner — Usage quota banner [needs: usage, flags] (requires usage, flags)
      A dismissible banner that warns when a metered quota nears its plan limit…
  upgrade-card — Billing upgrade card [available] (requires billing)
      A dashboard card showing the current plan with an upgrade or manage-billing CTA…

Install with: create-saas-starter add <block>

Each block is labeled available, installed, or needs: <features> — computed against the features your app was generated with. There's no separate list command; listing is add with no arguments.

What happens on install

add is add-only and validates everything before touching disk — a bad install fails cleanly with nothing written:

1. Read the stamp. .saas-starter.json tells add which features your app has and which CLI version built it.
2. Version must match exactly. A block is only ever CI-proven against its own template snapshot, so add refuses to install if the running CLI's version differs from the app's stamp, pointing you at the pinned CLI. See stamp & versioning.
3. Required features must be present. A block declares requires; if your app lacks any of them, add aborts — features can't be added after generation, so the remedy is to regenerate with them.
4. No folder collision. A block installs to src/components/blocks/<name>; if that folder exists, add refuses rather than overwrite.
5. Copy + strip markers. The block's files are copied in, with @feature marker regions for features your app doesn't have stripped out (the same engine generate uses).
6. Merge dependencies. Any npm deps the block needs that your app lacks are added to package.json and installed; a dep already present is left at your app's version (a differing range is a printed note, not a change).
7. Typecheck. add runs tsc --noEmit to prove the app still compiles with the block in place. A failure is a loud abort with the files left for inspection. Skip it with --no-verify.
8. Print wiring instructions. The block's usage string — how to import and render it — is printed last.

Flags

Multiple blocks can be installed at once: add upgrade-card quota-banner. All are validated before any is written.

The blocks

See the Blocks section for a live preview and install command for each block in the catalog.