Skip to main content

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.

​
Theme configuration

Each project can store a theme configuration as JSON. Fetch it server-side with fetchStoreThemeConfig: 
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:
VariablePurpose
--color-theme-primaryPrimary brand color (buttons, links)
--color-theme-primary-fgText color on primary backgrounds
--color-theme-fgDefault text color
--color-theme-borderBorder color
Set these on your root element to apply your brand: 
: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. 
npm install @colossal/ui-kit

​
Available components

ComponentDescription
ButtonPrimary, secondary, ghost, and outline variants. Sizes: sm, md, lg. Supports loading and disabled states.
InputText input with consistent styling
CheckboxCheckbox input
SelectDropdown select
AccordionExpandable content sections
PricePrice display component
QuantitySelectorQuantity picker with increment/decrement

​
Button example

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: 
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