Get started

Install the package

pnpm add @xaui/native@beta

The native peer dependencies are listed in the installation guide.

Create the theme once

// theme.ts
import { createTheme } from '@xaui/native/theme'

export const appTheme = createTheme({
  colors: {
    light: { accent: '#2563EB', accentForeground: '#FFFFFF' },
    dark: { accent: '#60A5FA', accentForeground: '#0F172A' },
  },
  radius: 16,
})

Soft, pressed and contrasting colours are derived in OKLab. Do not rebuild the theme during render — its identity has to stay stable.

fontFamilies names a font; it does not load one. If the theme is to point at anything but the system face, load the file first — Fonts is the whole of that step.

Mount the provider

import { XAUIProvider } from '@xaui/native/theme'
import { appTheme } from './theme'

export default function App() {
  return (
    <XAUIProvider theme={appTheme}>
      <YourApp />
    </XAUIProvider>
  )
}

colorMode takes light, dark or system. The portal host mounts with it.

Compose a component

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

export function SaveButton() {
  return (
    <Button variant="primary" onPress={save}>
      <Button.Icon as={SaveIcon} />
      <Button.Label>Save</Button.Label>
    </Button>
  )
}

• Slots use dot notation and render in JSX order.
• variant picks a semantic appearance; color takes a raw hue.
• Style props keep the full React Native names and values — padding={16}, width="100%".
• style still wins, for transforms, shadows and computed values.