Getting Started

1. Install blakeUI Native

npm install @blakeui/native

pnpm add @blakeui/native

yarn add @blakeui/native

bun add @blakeui/native

2. Install Mandatory Peer Dependencies

npm install react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0

pnpm add react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0

yarn add react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0

bun add react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0

It's recommended to use the exact versions specified above to avoid compatibility issues. Version mismatches may cause unexpected bugs.

3. Optional Dependencies

These packages are only needed if you use specific components or features:

Package	Version	Required for
`react-native-screens`	`^4.16.0`	BottomSheet, Dialog, Menu, Popover, Select, Toast
`@gorhom/bottom-sheet`	`^5.2.9`	BottomSheet, Menu / Popover / Select when `presentation="bottom-sheet"`

4. Set Up Uniwind

Follow the Uniwind installation guide to set up Tailwind CSS for React Native.

If you're migrating from NativeWind, see the migration guide.

5. Configure global.css

Inside your global.css file add the following imports:

@import 'tailwindcss';
@import 'uniwind';

@import '@blakeui/native/styles';

/* Path to the @blakeui/native lib inside node_modules relative to global.css */
/* Examples:
 *   - If global.css is at project root: ./node_modules/@blakeui/native/lib
 *   - If global.css is in app/: ../node_modules/@blakeui/native/lib
 *   - If global.css is in src/styles/: ../../node_modules/@blakeui/native/lib
 */
@source './node_modules/@blakeui/native/lib';

6. Wrap Your App with Provider

Wrap your application with BlakeUINativeProvider. You must wrap it with GestureHandlerRootView:

import { BlakeUINativeProvider } from '@blakeui/native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BlakeUINativeProvider>{/* Your app content */}</BlakeUINativeProvider>
    </GestureHandlerRootView>
  );
}

Note: For advanced configuration options including text props, animation settings, and toast configuration, see the Provider documentation.

7. Use Your First Component

import { Button } from '@blakeui/native';
import { View } from 'react-native';

export default function MyComponent() {
  return (
    <View className="flex-1 justify-center items-center bg-background">
      <Button onPress={() => console.log('Pressed!')}>Get Started</Button>
    </View>
  );
}

8. Reduce Bundle Size with Granular Exports

If you want to reduce bundle size and import only the components you need, our library provides granular exports for each component:

// Granular imports - use when you need only a few components
import { BlakeUINativeProvider } from "@blakeui/native/provider";
import { Button } from "@blakeui/native/button";
import { Card } from "@blakeui/native/card";

// General import - imports the whole library, use when you're using many components
import { Button, Card } from "@blakeui/native";

Granular imports are ideal when you only need a few components, as they help keep your bundle size smaller. General imports from @blakeui/native will include the entire library, which is convenient when you're using many components throughout your app.

Available granular exports:

@blakeui/native/provider - Provider component
@blakeui/native/provider-raw - Lightweight provider (keeps bare minimum to start)
@blakeui/native/[component-name] - Individual components
@blakeui/native/portal - Portal utilities
@blakeui/native/toast - Toast provider and utilities
@blakeui/native/utils - Utility functions
@blakeui/native/hooks - Custom hooks

Important: To keep the bundle size under control, you must follow the pattern with granular imports consistently. Even one general import from @blakeui/native will break this optimization strategy.

Tip: For even more control over your bundle, consider using BlakeUINativeProviderRaw — a lightweight provider that excludes ToastProvider and PortalHost.

What's Next?

Running on Web (Expo)

blakeUI Native is currently not recommended for web use. We are focusing on mobile platforms (iOS and Android) at this time. For web development, please use blakeUI React instead.

Quick Start