panda-preset-utopia

A Panda CSS preset that generates fluid and responsive scales using the Utopia approach.

This preset generates fontSize and spacing tokens using utopia-core.

This repository and package inspired by the work of amandaguthrie/panda-css-presets.

Contents

• Install
• Configure
• License

Install

npm

npm install -D panda-preset-utopia

pnpm

pnpm install -D panda-preset-utopia

yarn

yarn add -D panda-preset-utopia

bun

bun add -D panda-preset-utopia

> Back to Contents

Configure

In your panda.config.{ts,js} file, import the preset functions and include them in your presets list.

import { defineConfig } from '@pandacss/dev';
import {
  utopiaSpaceScalePreset,
  utopiaTypeScalePreset,
  type SpaceScaleOptions,
  type TypeScaleOptions,
} from 'panda-css-utopia'

const typeScaleOptions: TypeScaleOptions = {
    minWidth: 320,
    minFontSize: 18,
    minTypeScale: 1.2,
    maxWidth: 1240,
    maxFontSize: 20,
    maxTypeScale: 1.25,
    negativeSteps: 2,
    positiveSteps: 5,
};

const spaceScaleOptions: TypeScaleOptions = {
    minWidth: 320,
    maxWidth: 1240,
    minSize: 18,
    maxSize: 20,
    positiveSteps: [1.5, 2, 3, 4, 5, 6],
    negativeSteps: [0.75, 0.5, 0.25],
    customSizes: ['s-l', 'l-3xl'],
};

export default defineConfig({
  // ...
  presets: [
    // ... Other presets
    utopiaTypeScalePreset(typeScaleOptions),
    utopiaSpaceScalePreset(spaceScaleOptions),
  ],
  // ...
});

> Back to Contents

License

MIT © 2025 James Greenaway

> Back to Contents