Installation

Learn how to install Radix Themes Native in your React Native or Expo project.

Installation

Requirements

Radix Themes Native requires the following peer dependencies:

Package	Version
react	>= 18
react-native	>= 0.70
expo	>= 48

Install the Package

Choose your preferred package manager:

# npm
npm install radix-native-ui

# yarn
yarn add radix-native-ui

# pnpm
pnpm add radix-native-ui

Install Peer Dependencies

If you’re starting a new project, make sure you have React Native and Expo installed:

# Using Expo (recommended)
npx create-expo-app my-app
cd my-app
npm install radix-native-ui

# Using React Native CLI
npx react-native init my-app
cd my-app
npm install radix-native-ui

Optional Dependencies

Safe Area Context

For proper safe area handling on iOS and Android devices with notches:

npm install react-native-safe-area-context

If you’re using Expo, this is likely already installed in your project.

Verify Installation

Create a simple test to verify the installation:

// App.tsx
import { ThemeProvider, Button, Text, Flex } from 'radix-native-ui';

export default function App() {
  return (
    <ThemeProvider>
      <Flex style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} gap={3}>
        <Text>Radix Themes Native is working!</Text>
        <Button onPress={() => alert('Hello!')}>Click me</Button>
      </Flex>
    </ThemeProvider>
  );
}

TypeScript Support

Radix Themes Native is written in TypeScript and includes type definitions out of the box. No additional installation is required.

import { ButtonProps, ThemeProviderProps } from 'radix-native-ui';

// Types are automatically available
const customButtonProps: ButtonProps = {
  variant: 'solid',
  size: 2,
};

Next Steps

Quick Start

Learn how to set up your first app with Radix Themes Native.

Theming

Customize the look and feel of your app with the theming system.