Docs

This page isn't translated yet

Systhema documentation

Design tokens, Tailwind CSS, React and Next.js components and a PayloadCMS integration that share one source of truth.

On this page

Systhema bridges the gap between design and development, providing a unified design language that ensures your brand's visual identity is consistently translated across all applications.

Systhema is modular: pick exactly what you need. Each package builds on the core foundation to provide increasingly specialized functionality, from design tokens to a fully featured headless CMS integration.

Start hereLink to this section

  • I build sites with Systhema: start with the Quick start, then pick what you need below.
  • I edit a Systhema site: the Editor guide explains how to work with pages, blocks and settings in the Payload Admin, without code.
  • I work with a coding agent: AI agents shows how agents read version-correct docs and use the Systhema skills.

SectionsLink to this section

  • Getting started: scaffold a project, get registry access, choose packages, install by hand and keep a project upgraded.
  • Core concepts: design tokens, configuration, themes, the spacing model, motion, generated artifacts and the client/server boundary.
  • Design and tokens: token collections, custom tokens, fonts, colors, motion tokens, palettes, the Figma plugin and Systhema Design.
  • Styling: the Tailwind CSS integration and a reference for every Systhema utility class.
  • Components: React and Next.js components with live examples, props and their HTML class equivalents.
  • Next.js: what @systhemaui/next adds, from the provider and the gateway to frontend locales.
  • Payload CMS: withSysthema(), collections and globals, blocks, the Lexical editors, forms, posts, AI, analytics, Cloudflare and localization.
  • CLI: the global systhema CLI and the project-local systhema-core.
  • AI agents: how coding agents develop Systhema sites with version-correct docs, the systhema-docs MCP server and the agent skills.
  • API reference: the systhema.config reference, package entry points and the core APIs.
  • Guides: a step-by-step site build, recipes, multilingual sites, cookie consent and deploying.
  • Editor guide: a non-technical guide for people who edit their site in the Payload Admin.
  • Release notes: every release, newest first.