---
title: "Starter templates"
description: "The Next.js, Payload and HTML starters, what each includes and how to scaffold one."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl/next/getting-started/templates
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/next/llms.txt
---
> This page isn't translated yet. Showing English.


Start from a template to get the package wiring, scripts and token inputs. The CLI offers Next.js and Payload; the HTML starter requires manual setup.

## Available templates

### Next.js template

A Next.js application starter with Systhema UI integration. Use it for sites and applications that do not need a CMS.

[View Next.js template guide →](https://docs.systhema.app/nl/next/getting-started/templates/nextjs.md)

Highlights:

- Next.js 16+ with the App Router.
- TypeScript.
- Tailwind CSS v4 via `@import '@systhemaui/core/tailwind'`.
- Pre-configured Systhema UI components (`@systhemaui/core` + `@systhemaui/next`).
- Design-token system integration with the `systhema-core` CLI.

### Payload template

A complete Payload + Next.js starter with Systhema UI. The full-stack option for content-managed sites.

[View Payload template guide →](https://docs.systhema.app/nl/next/getting-started/templates/payload.md)

Highlights:

- Payload 3+ with Next.js App Router.
- Systhema UI component library (`@systhemaui/next`).
- Custom Lexical editor integrations (`root`, `region`, `fragment`, `slot`).
- Pre-built content blocks (sections, columns, hero, accordion, gallery, …).
- Database-agnostic, PostgreSQL is recommended.
- SEO, redirects, and media management out of the box.
- Capability-based access control.

### HTML template

A plain-HTML starter using Systhema's design tokens and CSS utility classes, without React or any framework.

[View HTML template guide →](https://docs.systhema.app/nl/next/getting-started/templates/html.md)

Highlights:

- Static HTML files, no bundler.
- Tailwind CSS v4 + `@systhemaui/core/tailwind`.
- A bundled listener entry whose current browser load failure is documented in the [HTML guide](html.md#the-bundled-javascript).
- A CommonJS config with `packages.react: true` to include component CSS classes.
- Concurrent dev scripts (`pnpm dev`) for live CSS rebuilds + a static file server.

## Scaffold a template

Use the global [`@systhemaui/cli`](https://docs.systhema.app/nl/next/cli.md):

```bash
# One-shot via pnpm dlx (no install).
pnpm dlx @systhemaui/cli@latest create my-app

# Or install globally first.
pnpm add -g @systhemaui/cli
systhema create my-app
```

The CLI's `create` command supports `next` and `payload`. Pick the template up front:

```bash
systhema create my-app --template next
systhema create my-app --template payload --yes --no-install
```

The HTML template is not offered by `systhema create`. [HTML template](https://docs.systhema.app/nl/next/getting-started/templates/html.md) describes its files so you can set it up by hand.

## Common template structure

All templates follow a consistent structure (with framework-specific extras):

- `src/tokens/`, design-token JSON files exported from the [`@systhemaui/figma`](https://docs.systhema.app/nl/next/design/figma.md) plugin.
- `systhema.config.{ts,js}`, Systhema configuration file.
- `package.json`, uses `systhema-core <command>` for project-local scripts.
- `.npmrc`, points the `@systhemaui` scope at GitHub Packages (you populate the matching `GITHUB_TOKEN`).

Framework specifics:

- Next.js / Payload: `src/app/` (App Router), `postcss.config.{js,mjs}`.
- HTML: `index.html`, `src/style.css`.