Add demo pages

Add a demo page when you want to adapt an existing screen for your app. The CLI copies the page and its supporting code into your current project, where you can edit it like the rest of your application.

Run the commands from your starter's root folder, where package.json is located. The examples below use crm/contacts; substitute the template and page you choose.

  1. 1

    Choose a page

    List the pages available from a source template:

    npx nateui@latest list --template crm

    Each result includes an ID such as crm/contacts. The part before / identifies the source template; the part after it identifies the page.

    Your purchase must cover the source template. You can add its pages to your current project even if that project started from another template.

  2. 2

    Add the selected page

    Turn the two parts of the ID into flags: crm/contacts becomes --contacts --crm.

    npx nateui@latest add-page --contacts --crm

    For page names containing brackets, quote the flag, such as '--[projectId]'.

    The CLI copies the page's files and registers its routes and any supplied menu entries. Add each additional listed page you want to use with another add-page command.

    If the CLI prints a package-install command, run that command before using the page.

    Run your app and open the added screen. Pages with a menu entry appear in navigation automatically. Some detail pages have a record-specific URL instead; the Project Management guide includes an example of those routes.

    To customize the page, start in src/app/(protected-pages)/<page>/. Follow Connect your data when replacing its sample records with your own data.

Existing files

When a copied file already exists and differs from the demo version, the CLI keeps your file and prints a warning. Files that already match are left as they are.

If the command finishes with skipped-file warnings, the page is still recorded as installed. Running the same add command again will not retry those files.

Append --overwrite when you deliberately want to replace differing files during an add. This can replace customized shared components and data files as well as the page itself, so commit or back up your work first.

For a page that is already installed, follow Replace an installed page.

Remove a page

  1. 1

    Remove the installed page

    To see your installed items, including page IDs, run:

    npx nateui@latest list --installed

    Save any changes you want to keep before removal. The command deletes the page's route folder, including your edits, and removes its registered route, menu and icon entries.

    Pass the page part of its ID to the remove command:

    npx nateui@latest remove-page --contacts

    Shared files and package dependencies remain in the project. Check whether other code uses them before deleting any yourself.

    Keep the // nateui:... comments in your configuration files so the CLI can find the entries associated with an installed page.

    If more than one installed ID ends with the same page name, remove-page removes the first match. It has no template selector, so avoid using it to distinguish those installs.

Replace an installed page

Adding an already installed page makes no changes, even with --overwrite. To replace its code, remove it first and add a fresh copy.

  1. 1

    Save your work and remove the page

    Commit or back up your changes, then follow Remove a page. Its route files will be deleted.

  2. 2

    Add it again with overwrite

    Use the same page and source-template flags, followed by --overwrite:

    npx nateui@latest add-page --contacts --crm --overwrite

    This replaces differing page and shared files. Reapply any customizations you want to retain from your saved work, then run an install command if the CLI prints one.