Getting Started

Learn how to set up Xaui in your React Native project and start building beautiful user interfaces.

1. Installation

Install the core packages using your preferred package manager:

With npm:

npm install @xaui/native @xaui/icons

Or with yarn:

yarn add @xaui/native @xaui/icons

Or with pnpm:

pnpm add @xaui/native @xaui/icons

2. Theme Customization

Xaui lets you override only the parts of the theme you need. You can customize brand colors, surface colors, text colors, typography tokens, spacing, radius, and more without rewriting the full theme.

  • Use theme for light mode.
  • Use darkTheme for dark mode.
  • Pass partial objects: non-overridden tokens keep default values.
import { XUIProvider } from '@xaui/native/core'


const customLightTheme = {
  colors: {
    primary: {
      main: '#2563EB',
      foreground: '#FFFFFF',
      background: '#DBEAFE',
    },
    secondary: {
      main: '#0EA5E9',
      foreground: '#FFFFFF',
      background: '#E0F2FE',
    },
    background: '#FFFFFF',
    foreground: '#0F172A',
  },
  borderRadius: {
    md: 12,
    lg: 16,
  },
}


const customDarkTheme = {
  colors: {
    primary: {
      main: '#60A5FA',
      foreground: '#0B1220',
      background: '#1E3A8A',
    },
    background: '#020617',
    foreground: '#E2E8F0',
  },
}


export default function App() {
  return (
    <XUIProvider theme={customLightTheme} darkTheme={customDarkTheme}>
      <YourApp />
    </XUIProvider>
  )
}

Tip: Start by overriding only colors.primary and colors.background to quickly align Xaui with your brand, then extend to spacing and typography if needed.

3. Setup Provider

Wrap your app with the XUIProvider to enable theming and context:

import { XUIProvider } from '@xaui/native/core'


export default function App() {
  return (
    <XUIProvider>
      <YourApp />
    </XUIProvider>
  )
}

4. Use Components

Start using components in your application:

import { Button } from '@xaui/native/button'


export function MyComponent() {
  return (
    <Button themeColor="primary" onPress={() => console.log('Pressed!')}>
      Hello Xaui
    </Button>
  )
}

Next Steps