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

# Kanso UI for React Native

> Kanso UI's Material Design components for iOS and Android, on the same tokens and theming as the web library.

`@kanso-labs/react-native-kanso-ui` is [Kanso UI](/kanso-ui/web/introduction.md) for React Native. It keeps the web library's component names, props, token roles and Material Design readings, and draws them with React Native's own components rather than React Aria and StyleX, which do not run on native.

A theme is the web library's: a set of `--kui-*` custom properties with values in CSS syntax. So **one theme object serves a web app and a native app alike**.

> **[Storybook](https://react-native-kanso-ui.kansolabs.org/)**
>
> Every component through React Native Web, under each demo scheme.

> **[Installation](/kanso-ui/react-native/installation.md)**
>
> The package and the libraries it needs beside it.

> **[Theming](/kanso-ui/react-native/theming.md)**
>
> `ThemeScope`, `useTheme()` and fonts.

> **[Routing and localisation](/kanso-ui/react-native/routing-and-localisation.md)**
>
> `RouterProvider` and `I18nProvider`.

## How it relates to the web library

| | Web | React Native |
| - | - | - |
| Package | `@kanso-labs/kanso-ui` | `@kanso-labs/react-native-kanso-ui` |
| Built on | React Aria Components and StyleX | `View`, `Text`, `Pressable` and Reanimated |
| Theme | `--kui-*` map on `ThemeScope` | The same map on `ThemeScope` |
| Reading a token | `var(--kui-color-primary)` | `useTheme().colors.primary` |
| Styling a component | `className` | `style` |

Both libraries read their tokens from [Kanso UI Core](/kanso-ui/core/introduction.md), so a token changes in one place and reaches both.

## Previewing on a device

The published Storybook renders through React Native Web, which catches token, layout and contrast drift but says nothing about how iOS or Android draws text and shadows. The repository's `example/` app is an on-device Storybook that reads the same stories in Expo Go:

```bash theme={null}
cd example
npm install
npm start
```

Then open it from the QR code Expo prints.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.