---
title: "@playstack/chakra"
description: "Chakra v3 theme composition, semantic tokens and neutral/warm presets."
tags: ["package","ui","chakra","themes","pro"]
---

{/* package-access:start */}

> **Pro.** Covered by the Playstack Pro License. Registry access is required; check preview availability before installing. See [package access](/docs/packages#access-policy).

{/* package-access:end */}

The package composes Chakra's default configuration with Playstack's neutral theme and application overrides. It does not duplicate Chakra's primitive component library.

~~~ts
import { createPlaystackSystem, warmTheme } from '@playstack/chakra'

export const system = createPlaystackSystem(warmTheme)
~~~

Create the system once in a client-owned theme module. Pass it to ChakraProvider or PlaystackUIProvider; do not serialize its functions through a Next Server Component boundary.

Exports include the root, `/system`, `/tokens`, `/themes/default` and `/themes/warm`. Both presets define light/dark foreground, background and border tokens. Color-mode selection, persistence, fonts and product branding remain application-owned; density is a separate app-ui shell setting.

{/* package-install:start */}

## Install

After confirming [preview access](/docs/packages#access-policy), install the package at your application's shared Playstack version:

```sh
npm install --save-exact @playstack/chakra@0.1.0-beta.1
```

Check the peer requirements below before choosing a runtime or provider.

{/* package-install:end */}

## Share a theme across a site and dashboard

Keep your product configuration and composed system in one application-owned theme module, then import that same module from both apps:

```ts
import { defineConfig } from '@chakra-ui/react'
import { createPlaystackSystem } from '@playstack/chakra'

const productTheme = defineConfig({
  theme: {
    tokens: {
      fonts: { heading: { value: 'system-ui, sans-serif' } },
    },
    recipes: {
      heading: { base: { letterSpacing: '-0.02em' } },
    },
  },
})

export const system = createPlaystackSystem(productTheme)
```

Pass `system` to the existing `ChakraProvider` or to `PlaystackUIProvider`; do not nest another theme provider just for shared components. Centralize heading size/line-height recipes, semantic colors, and shared styles there, removing equivalent per-page overrides. Keep intentional page-specific layouts separate. Load product fonts and global CSS in each application's framework entry point and align the initial color mode to avoid a hydration flash. Custom font assets and the Playstack site's internal theme are not bundled as a public product theme.

Peers are Chakra 3 (3.0 through 3.37), Emotion 11 and React/React DOM 18.2 or 19. Use TypeScript bundler resolution with ESNext modules. Verify contrast and assistive-technology behavior in your own product's browsers.

{/* package-reference:start */}

## API entry points and requirements

Reference snapshot: `@playstack/chakra@0.1.0-beta.1`. Import only the entry point your runtime needs. Paths below are relative to the installed package; use **Go to Definition** in your editor to inspect exact parameters, return types and overloads. Do not import the declaration-file paths directly.

| Public entry point | Declaration file |
| --- | --- |
| `@playstack/chakra/playstack.integration.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/chakra` | `./dist/index.d.ts` |
| `@playstack/chakra/tokens` | `./dist/tokens.d.ts` |
| `@playstack/chakra/system` | `./dist/system.d.ts` |
| `@playstack/chakra/themes/default` | `./dist/themes/default.d.ts` |
| `@playstack/chakra/themes/warm` | `./dist/themes/warm.d.ts` |
| `@playstack/chakra/package.json` | No TypeScript declaration (asset or metadata export). |

Node.js engine requirement: `>=20`. This is not a claim that every entry point works in browsers or Workers.

### Peer dependencies

Keep existing framework versions that satisfy these ranges. Install optional peers only when using the corresponding adapter. The package manager resolves ordinary dependencies separately.

| Peer | Compatible range | When needed |
| --- | --- | --- |
| `@chakra-ui/react` | `^3.0.0` | Required by the package. |
| `@emotion/react` | `^11.0.0` | Required by the package. |
| `react` | `^18.2.0 \|\| ^19.0.0` | Required by the package. |
| `react-dom` | `^18.2.0 \|\| ^19.0.0` | Required by the package. |

For a complete first program, start with [Getting started](/docs/getting-started). For API lookup and partial-example conventions, see [Reading the reference](/docs/packages#reading-the-reference). Provider failures, lifecycle requirements and application responsibilities remain described in the guide above; types alone do not establish production safety.

{/* package-reference:end */}