# Customization

Props, className & the file you own.

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.

```tsx
<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.

```tsx
<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.

```tsx
<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**. Components pass your classes through [`merge`](/docs/class-merge), which drops the class yours replaces, so `c:accent` on a component that sets `c:white` 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.

```tsx
<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.

```tsx
<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](https://base-ui.com), 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`](/ui/components/cli#remove-unused-components).

## 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 [Color System](/docs/color-system) and [Configuration](/docs/configuration).