# Theme Slots

The stable styling API is `theme.slots`. It is keyed by component, then by the slot within it.

```tsx
<UpupUploader
    theme={{
        mode: 'system',
        slots: {
            uploader: { root: 'rounded-lg border' },
            fileList: { uploadButton: 'bg-black text-white' },
        },
    }}
/>
```

Use `theme.mode` for color scheme:

```tsx
<UpupUploader theme={{ mode: 'dark' }} />
```

Slot contracts are exported from `@useupup/core/theme`.

## Internals (what actually renders)

Rendered styling comes from `theme.{mode,tokens,slots}` applied through inline
`cn()` class strings inside each component (e.g. `UploaderPanel`). The
`--upup-spacing-*` CSS-variable group is generated by the theme system but is
**not** consumed by any component today — treat it as reserved, not a live
styling knob.