Docs

This page isn't translated yet

Starter templates

The Next.js, Payload and HTML starters, what each includes and how to scaffold one.

On this page

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 templatesLink to this section

Next.js templateLink to this section

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 →

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 templateLink to this section

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

View Payload template guide →

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 templateLink to this section

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

View HTML template guide →

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.
  • 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 templateLink to this section

Use the global @systhemaui/cli:

# 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:

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 describes its files so you can set it up by hand.

Common template structureLink to this section

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

  • src/tokens/, design-token JSON files exported from the @systhemaui/figma 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.