systhema.config reference

Every key systhema.config.{ts,js,json} accepts. Where the file lives and how it is loaded is on Configuration.

manifestLink to this section

Imports your design-token manifest. The manifest references the token files Systhema should process.

import manifest from './tokens/manifest.json'

const config: SysthemaConfig = { manifest }

In a JSON config file, use a path string:

{ "manifest": "./tokens/manifest.json" }

If manifest is omitted, Systhema falls back to the built-in default tokens shipped in @systhemaui/core. What the manifest contains is described on Token collections.

spacingLink to this section

Controls how spacing values are transformed into CSS: a single SpacingRule or an array of them (function, include, exclude, swap). See Spacing rules.

blocksLink to this section

Toggles and configures the component CSS families. See Component CSS blocks.

parallaxLink to this section

Configures the parallax ranges (translateRange, translateRangeBig, scale). See Parallax.

customTokensLink to this section

Overrides or extends tokens without editing the JSON files. See Custom tokens.

packagesLink to this section

Enable framework-specific behaviour (mostly: emit safelists for that framework's components).

const config: SysthemaConfig = {
  packages: {
    react: {
      enabled: true,
      animationClasses: 'fade-in slide-up',
      transitionClasses: 'transition-all duration-300',
    },
    payload: true,
  },
}

A boolean shorthand (react: true) is also supported.

payload also takes an object form carrying project-level Payload settings that belong next to the locale contract rather than in payload.config.ts — today, the content localization field policy:

const config: SysthemaConfig = {
  packages: {
    payload: {
      enabled: true,
      localization: { policy: 'all', shared: ['pages.default.hero.aspectRatio'] },
    },
  },
}

Core keeps localization deliberately shallow — @systhemaui/payload owns the field-path vocabulary, and core must not grow a dependency on Payload's schema types. See the content localization field policy. This is NOT part of the locales contract on purpose: that object is inlined into the browser bundle as the build-time SYSTHEMA_LOCALES constant, so a field-path list on it would ship the project's schema shape to every visitor.

optimizationLink to this section

Production-only CSS passes and obfuscation. See Production CSS optimization.

cookieConsentLink to this section

The cookie consent banner. See Consent configuration.

localesLink to this section

Frontend locales, defined with defineSysthemaLocales(). See Frontend locales.

messagesLink to this section

Frontend UI catalogs (catalogs, fallback). See Messages and catalogs.

Full exampleLink to this section

import type { SysthemaConfig } from '@systhemaui/core'
import manifest from './tokens/manifest.json'

const config: SysthemaConfig = {
  manifest,

  spacing: {
    function: '--spacing(%value% / 4)',
    include: ['grid', 'gap', 'container', 'section'],
    exclude: ['feature.mediaMinHeight'],
  },

  blocks: {
    header: {
      enabled: true,
      subNavigationIcon: 'chevron-down',
      menuIcon: { type: 'animated' },
    },
    columns: { enabled: true, count: 6 },
    gallery: {
      enabled: true,
      prevIcon: 'arrow-left',
      nextIcon: 'arrow-right',
    },
  },

  parallax: {
    translateRange: { from: -16, to: 16 },
    translateRangeBig: { from: -32, to: 32 },
    scale: 1.1666,
  },

  packages: {
    react: {
      enabled: true,
      animationClasses: 'fade-in slide-up',
      transitionClasses: 'transition-all duration-300',
    },
  },
}

export default config