---
title: "Configuration"
description: "Where systhema.config lives, how it is loaded, and what each section controls."
requested_language: sk
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/sk/next/concepts/configuration
version: unreleased (main)
docs_index: https://docs.systhema.app/sk/next/llms.txt
---
> This page isn't translated yet. Showing English.


`systhema.config.ts` is the one place a project configures Systhema: which tokens to read, how sizes become CSS, which component CSS to emit, and which packages and features are on. This page explains how the file is found and read; every key is listed in the [systhema.config reference](https://docs.systhema.app/sk/next/reference/config.md).

## A typical config

```ts title="systhema.config.ts"
import type { SysthemaConfig } from '@systhemaui/core'
import manifest from './src/tokens/manifest.json'

const config: SysthemaConfig = {
  manifest,
  packages: {
    react: {
      enabled: true,
      transitionClasses: 'duration-300 ease-out-cubic',
      animationClasses: 'aos animate-fadeinup',
    },
  },
}

export default config
```

Every key is optional. Without a config file, or without a `manifest`, Systhema uses the default tokens that ship with `@systhemaui/core`.

In an HTML project without TypeScript, write the same object in `systhema.config.js`:

```js title="systhema.config.js"
const manifest = require('./src/tokens/manifest.json')

/** @type {import('@systhemaui/core').SysthemaConfig} */
module.exports = {
  manifest,
  packages: { react: false },
}
```

## Where the config is loaded from

`@systhemaui/core` uses the first file it finds, in this order:

1. `systhema.config.ts`
2. `systhema.config.js`
3. `systhema.config.json`
4. `src/systhema.config.ts`
5. `src/systhema.config.js`
6. `src/systhema.config.json`

## How it is read

- **Merged with defaults.** Your object is deep-merged over Systhema's default config, so you set only what differs. `manifest` is the exception: when you set one, it replaces the default manifest instead of merging with it.
- **At build time.** The Tailwind plugin and `systhema-core sync` read the config to generate CSS, types and references. After changing `manifest`, `customTokens`, `spacing` or `blocks`, run `pnpm sync` and restart the dev server.
- **On the server.** Components and your server code read it through `getSysthemaConfigSync()` or `getSysthemaConfig()`.
- **In the browser.** The config file is never bundled. `SysthemaProvider` hands the browser the config together with a small snapshot of resolved token values, and client components read them from `@systhemaui/core/client`. See [Client and server code](https://docs.systhema.app/sk/next/concepts/client-and-server.md).

## What each section controls

| Key             | Controls                                                        | Explained on                                                       |
| --------------- | --------------------------------------------------------------- | ------------------------------------------------------------------ |
| `manifest`      | Which token files are processed                                 | [Token collections](https://docs.systhema.app/sk/next/design/token-collections.md)                |
| `customTokens`  | Token overrides and extensions                                  | [Custom tokens](https://docs.systhema.app/sk/next/design/custom-tokens.md)                        |
| `spacing`       | How sizing tokens become CSS (fixed or fluid)                   | [Responsive sizing](https://docs.systhema.app/sk/next/concepts/responsive-sizing.md#spacing-rules)          |
| `blocks`        | Which component CSS families are emitted                        | [Component CSS blocks](https://docs.systhema.app/sk/next/styling/blocks.md)                       |
| `parallax`      | Parallax ranges                                                 | [Parallax](https://docs.systhema.app/sk/next/styling/parallax.md#configuration)                   |
| `packages`      | Which integrations are on, and the classes React components add | [systhema.config reference](https://docs.systhema.app/sk/next/reference/config.md#packages)       |
| `optimization`  | Production CSS passes and obfuscation                           | [Production CSS optimization](https://docs.systhema.app/sk/next/styling/optimization.md)          |
| `cookieConsent` | The cookie consent banner (off by default)                      | [Consent configuration](https://docs.systhema.app/sk/next/guides/cookie-consent/configuration.md) |
| `locales`       | Frontend locales                                                | [Frontend locales](https://docs.systhema.app/sk/next/nextjs/locales.md)                     |
| `messages`      | Frontend message catalogs                                       | [Messages](https://docs.systhema.app/sk/next/nextjs/locales/messages.md)                          |

## `packages`

`packages` turns on the integrations a project uses. Both are off by default:

- `react`: `true`, or an object with `enabled`, `transitionClasses` and `animationClasses`. Turning it on adds the component classes to the safelist so Tailwind keeps them. `transitionClasses` go on interactive elements (buttons, links, cards) and `animationClasses` on elements that reveal as they scroll in; see [Motion](https://docs.systhema.app/sk/next/concepts/motion.md).
- `payload`: `true` in a Payload project. Payload itself is configured with `withSysthema()` in `payload.config.ts`; see [withSysthema](https://docs.systhema.app/sk/next/payload/with-systhema.md).

The package flags should match the `@systhemaui/*` packages in `package.json`. See [Choosing packages](https://docs.systhema.app/sk/next/getting-started/choosing-packages.md).

## Reading the config at runtime

Use `getSysthemaConfigSync()` or the async `getSysthemaConfig()` to read the merged config from your own server code, and import them from `@systhemaui/core/client` in a client component. See [Runtime config](https://docs.systhema.app/sk/next/reference/core.md#runtime-config).

```ts
import { getSysthemaConfigSync } from '@systhemaui/core'

const { packages } = getSysthemaConfigSync()
```

## Related

- [systhema.config reference](https://docs.systhema.app/sk/next/reference/config.md)
- [Design tokens](https://docs.systhema.app/sk/next/concepts/design-tokens.md)
- [Responsive sizing](https://docs.systhema.app/sk/next/concepts/responsive-sizing.md)