Three ways to change a component, in the order worth trying them.
Use Props
Props are the reliable way to change a component, because the component applies them itself.
<Badge tone="subtle" color="green" size="lg" shape="pill">
Shipped
</Badge>
Every component page lists its full API: each prop, its type, its default and what it does. Reach for that table before anything else. Most of what people try to do with className already exists as a prop.
className
Every component takes className and merges it into its own classes.
<Button className="w:100%">Save</Button>
That works for adding something the component does not set, like width above, and it works for overriding something it does set.
<Button className="c:accent">Save</Button>
Yumma CSS utilities are all single-class selectors, so they all have the same specificity, and the winner between two of them is whichever comes later in the generated stylesheet. Adding c:accent to a component that already sets c:white used to do nothing at all. Components call merge instead of appending, which drops the class that loses, so what you pass takes effect.
Only a class that sets the same property is dropped, so nothing you add goes missing.
Reach for a prop first anyway. It says what you mean, it is checked, & it survives an edit to the component's own classes.
When there is no prop for what you need, edit the file.
The Focus Outline
Every component marks :focus-visible with an outline, and one focus prop covers it.
<Dialog trigger="Rename" title="Rename file" focus="fv:oc-blue-2/60" />
A string of Yumma CSS utilities restyles it: the color is fv:oc-*, the thickness fv:ow-* and the distance from the control fv:oo-*. An outline follows the element's own border box, so a control's shape carries into it with nothing to keep in step.
This is separate from className because className reaches the root element and nothing else. A Dialog has four focusable parts, the trigger, the close button and both footer buttons, and className only ever lands on the first of them. focus reaches all four, and every inner control of any other component.
focus={false} removes the outline instead, along with the danger, error and success tints that ride with it.
<Button variant="danger" focus={false} className="fv:bg:silver-2">
Delete
</Button>
An outline you can turn off is an outline someone can lose. On its own,
focus={false} leaves nothing marking where the keyboard is, which fails
WCAG 2.4.7. Put something back.
Own Your Components
yummaui add copies a real file into your project, and nothing overwrites it later. When props and className are not enough, all you need to do is edit it.
Components are built on Base UI, so the primitive underneath is documented there, which matters the moment you start editing. Pages built on a primitive link to it directly.
Removing a component you decided against is yummaui prune.
Colors & Theme
Component colors come from Yumma CSS, so they are configured in yumma.config.mjs rather than anywhere in Yumma UI. Adding a brand color or changing how shades are generated is covered in Colors and Configuration.