@playstack/chakra

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

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.

Install

After confirming preview access, install the package at your application's shared Playstack version:

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

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

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:

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.

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.

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.

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