Theming

Colors

Seven semantic colors, each with a full 50–950 shade scale. Components take one of these as a color prop rather than a raw hex value.

Surfaces & text

Dark-theme-only semantic tokens most components are built from — prefer these over the raw neutral scale so the whole UI stays consistent.

Spacing & radius

A named scale (2xs through 6xl) alongside the standard numeric Tailwind-style scale — use whichever reads clearer for a given class.

<div class="flex gap-md p-lg rounded-lg">...</div>

Customizing colors

bundyPreset() takes a colors option, deep-merged over the defaults above — override just the shades/tokens you need, everything else keeps its default value. This is per-project: every project runs its own UnoCSS build against its own preset call, so different projects can have entirely different palettes off the same installed package.

import { defineConfig, presetWind3 } from "unocss";
import { bundyPreset } from "@jgastager/bundy-ui/preset";

export default defineConfig({
  presets: [
    presetWind3(),
    bundyPreset({
      colors: {
        primary: { DEFAULT: "#7C5CFF" },
        background: "#0B0B0F",
      },
    }),
  ],
});

Works for a single shade ( primary.DEFAULT ) or a whole semantic token ( background , elevated , etc. — see the surface/text tokens above for the full list).

Component defaults

To change a component's default prop values across a whole project — without passing the same prop at every call site — set them once in app.config.ts under the bundyUI key. Every component reads its defaults through useBundyDefaults() internally, which checks this config first; an explicit prop on a given usage always wins over it.

export default defineAppConfig({
  bundyUI: {
    button: { variant: "ghost", color: "primary" },
    card: { rounded: "lg" },
  },
});

The key for each component is its name in lowerCamelCase ( Button → button , DropdownMenu → dropdownMenu ). This is the only supported way to change a component's defaults — the package is a normal dependency, not something you're expected to fork or hand-edit.

Extending the preset

Add your own presets or rules alongside it in your own uno.config.ts — bundyPreset() only contributes the tokens above, it doesn't replace the base utility engine.

import { defineConfig, presetWind3 } from "unocss";
import { bundyPreset } from "@jgastager/bundy-ui/preset";

export default defineConfig({
  presets: [presetWind3(), bundyPreset()],
  // your own theme overrides, rules, etc. go here too
});