> ## Documentation Index
> Fetch the complete documentation index at: https://docs.colossal.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize your Colossal storefront appearance using project theme configuration, CSS variables, and server-side theme fetching with fetchStoreThemeConfig.

## Theme configuration

Each project can store a theme configuration as JSON. Fetch it server-side with `fetchStoreThemeConfig`:

```tsx theme={null}
import { fetchStoreThemeConfig } from "@colossal-sh/storefront-sdk";

const theme = await fetchStoreThemeConfig("my-store.example.com");
// Returns the project's theme config (colors, fonts, etc.)
```

Use the returned values to set CSS custom properties or pass them to your component library.

## CSS variables

The `@colossal/ui-kit` components and hosted checkout use CSS custom properties for theming:

| Variable                   | Purpose                              |
| -------------------------- | ------------------------------------ |
| `--color-theme-primary`    | Primary brand color (buttons, links) |
| `--color-theme-primary-fg` | Text color on primary backgrounds    |
| `--color-theme-fg`         | Default text color                   |
| `--color-theme-border`     | Border color                         |

Set these on your root element to apply your brand:

```css theme={null}
:root {
  --color-theme-primary: #fe3c08;
  --color-theme-primary-fg: #ffffff;
  --color-theme-fg: #111111;
  --color-theme-border: #e5e5e5;
}
```

## UI Kit

The `@colossal/ui-kit` package provides primitive React components styled with the CSS variables above.

```bash theme={null}
npm install @colossal/ui-kit
```

### Available components

| Component          | Description                                                                                                     |
| ------------------ | --------------------------------------------------------------------------------------------------------------- |
| `Button`           | Primary, secondary, ghost, and outline variants. Sizes: `sm`, `md`, `lg`. Supports loading and disabled states. |
| `Input`            | Text input with consistent styling                                                                              |
| `Checkbox`         | Checkbox input                                                                                                  |
| `Select`           | Dropdown select                                                                                                 |
| `Accordion`        | Expandable content sections                                                                                     |
| `Price`            | Price display component                                                                                         |
| `QuantitySelector` | Quantity picker with increment/decrement                                                                        |

### Button example

```tsx theme={null}
import { Button } from "@colossal/ui-kit/primitives";

<Button variant="primary" size="md" loading={isSubmitting}>
  Add to cart
</Button>
```

Variants: `primary`, `secondary`, `ghost`, `outline`.

### Classname utility

The UI kit exports a `cn()` function that merges class names using `clsx` and `tailwind-merge`:

```tsx theme={null}
import { cn } from "@colossal/ui-kit";

<div className={cn("p-4 bg-white", isActive && "ring-2 ring-primary")} />
```

## Custom styling

Override any component styling by targeting the CSS variables or by wrapping components with your own styles. The UI kit uses Tailwind CSS classes internally, so `tailwind-merge` prevents class conflicts when you add your own Tailwind classes.

## Next steps

* [React SDK overview](/react-sdk/overview). See all available components and hooks