RNUI / documentation

Styling engines

RNUI publishes two registry variants with the same component API and engine-specific styling setup.

Choose the variant that matches the styling system already configured in your Expo app. Component names and semantic color tokens stay consistent across both variants.

Registry variant	Tailwind	Setup difference
NativeWind v4	v3 config	Babel preset and `withNativeWind` Metro wrapper.
Uniwind	v4, CSS-first	`withUniwindConfig` Metro wrapper; no Babel plugin.

NativeWind v4

For apps already using NativeWind with Tailwind CSS v3.

npx expo install nativewind tailwindcss@^3 react-native-reanimated react-native-worklets

Metro setup

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './global.css' });

Uniwind

For Tailwind CSS v4 projects using Uniwind's CSS-first configuration.

npx expo install uniwind tailwindcss

Metro setup

const { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro');

const config = getDefaultConfig(__dirname);
module.exports = withUniwindConfig(config, { cssEntryFile: './global.css' });

Shared setup

Configure the @/* import alias in tsconfig.json.
Copy RNUI's components.json template to the app root.
Import global.css from the app entry.
For system theme switching, set Expo's userInterfaceStyle to automatic.

See the complete manual setup reference for Babel, Metro, and TypeScript configuration examples.