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:

// Changing target background and text color
<Button className="bg-blue-5 c-white h:bg-blue-6">Click Me</Button>

Flexible by design

Because Yumma CSS does not use a configuration-based token system or support arbitrary values, you have the ultimate freedom to construct your own design system from scratch. Yumma UI provides you with professionally designed, production-ready starting points that you can then adapt to your brand's specific needs.

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    },  },});

Overriding color shades

If you want to override specific shades of an existing color, you can do so by providing new values for those shades in the theme.colors configuration. For example, to change the blue-5 shade:

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