Introducing Yumma CSS API

Jul 11, 2025

Today, we are introducing @yummacss/api, a TypeScript/JavaScript library designed to meet a variety of development needs. It provides access to all base Yumma CSS class definitions in a programmatic manner, simplifying the integration process.

Why Yumma CSS API?

It fuels both the Yumma CSS documentation and playground by providing the necessary data and utilities in a 300 KB package.

Instead of manually searching for utilities or maintaining your own lists, you can now access the entire Yumma CSS utility set through simple, type-safe functions. This makes it easy to:

Generate documentation
Build custom apps, plugins or extensions
Integrate with frameworks
Analyze or extend your design system

Getting started

Yumma CSS API is a powerful TypeScript/JavaScript utility library that provides programmatic access to Yumma CSS class definitions.

Installing

pnpm add @yummacss/api

npm i @yummacss/api

yarn add @yummacss/api

Usage examples

Get all utilities at once:

import { getAllUtils } from "@yummacss/api";

const all = getAllUtils();

Get only background utilities:

import { getBackgroundUtils } from "@yummacss/api";

const backgrounds = getBackgroundUtils();

Access a specific utility from a category:

import { getBoxModelUtils } from "@yummacss/api";

const boxModel = getBoxModelUtils();
const margin = boxModel["margin"];

Available API

Import utility group functions individually:

import {
  getAllUtils,
  getBackgroundUtils,
  getBorderUtils,
  getBoxModelUtils,
  getColorUtils,
  getEffectUtils,
  getFlexboxUtils,
  getFontUtils,
  getGridUtils,
  getInteractivityUtils,
  getOutlineUtils,
  getPositioningUtils,
  getSvgUtils,
  getTableUtils,
  getTextUtils,
  getTransformUtils,
} from "@yummacss/api";

For advanced use cases, use these types:

import type { UtilityMap, UtilityItem } from "@yummacss/api";