Documentation menu

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 @upupjs/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.