Customization

Atomic customization

Yumma UI is built with a strictly atomic philosophy. Unlike other component libraries that use semantic tokens (primary, secondary, etc.) or complex theme objects, Yumma UI components are styled using direct atomic classes from Yumma CSS.

This means customization is as simple as changing a class name:

<Button className="bg-blue-5 c-white h:bg-blue-6">Click Me</Button>

Flexible by Design

Component Slots

Most Yumma UI components are built using Base UI, which provides a clear "slot" system for deep customization. This allows you to style every single part of a component independently.

For example, in a Dialog component, you might have slots for the Backdrop, Content, and Close button:

<Dialog>
  <DialogBackdrop className="bg-black/50" />
  <DialogContent className="p-6 bg-zinc-9 br-md"></DialogContent>
</Dialog>

Extending Colors

You can extend or override the default color palette using the theme.colors configuration in yumma.config.mjs. This allows you to introduce brand-specific colors while maintaining the atomic approach.

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    colors: {      purple: "#9333EA", // add 'purple' as a new color    },  },});

Adjusting Shade Steps

Every color family generates 13 shades from its base value. percentage controls how far each step mixes toward white or black, so raising it spreads the scale wider & lowering it tightens it.

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    colors: {      percentage: {        light: 16, // default is 14        dark: 16, // default is 14      },    },  },});

percentage belongs inside colors, not beside it. Placed as a sibling it is silently ignored & every shade keeps its default value.