Customization

Theming

Kachindo UI is built for React Native and Expo. It uses CSS variables for theming, allowing you to easily customize the look and feel of your mobile applications.

Core Colors

The foundation of the design system, built around a sophisticated grayscale aesthetic.

Light Mode

Background
Foreground
Primary
Muted

Dark Mode

Background
Foreground
Primary
Muted

CSS Variables

Update these variables in your globals.css to globalize your brand.

@layer base {
  :root {
    --background: 240 10% 98%;
    --foreground: 240 10% 3.9%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --radius: 1rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 100%;
    --primary-foreground: 240 10% 3.9%;
  }
}

Platform Setup (NativeWind v4)

Since Kachindo UI is built for React Native and Expo, you'll use NativeWind v4 to map your CSS variables to your native components.

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --radius-lg: var(--radius);
}

Typography

Kachindo UI uses Geist by default for a modern, high-end feel.

Heading

The quick brown fox

Body

Jumps over the lazy dog. Designed for readability and elegance in mobile applications.

Profile