# Quick Start **Category**: native **URL**: https://www.blakeui.com/en/docs/native/getting-started/quick-start **Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/native/getting-started/(overview)/quick-start.mdx > Get started with blakeUI Native in minutes *** ## Getting Started ### 1. Install blakeUI Native ```bash npm install @blakeui/native ``` ```bash pnpm add @blakeui/native ``` ```bash yarn add @blakeui/native ``` ```bash bun add @blakeui/native ``` ### 2. Install Mandatory Peer Dependencies ```bash 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 ``` ```bash 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 ``` ```bash 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 ``` ```bash 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](https://docs.uniwind.dev/quickstart) to set up Tailwind CSS for React Native. If you're migrating from NativeWind, see the [migration guide](https://docs.uniwind.dev/migration-from-nativewind). ### 5. Configure global.css Inside your `global.css` file add the following imports: ```css @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`: ```tsx import { BlakeUINativeProvider } from '@blakeui/native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; export default function App() { return ( {/* Your app content */} ); } ``` > **Note**: For advanced configuration options including text props, animation settings, and toast configuration, see the [Provider documentation](/docs/native/getting-started/provider). ### 7. Use Your First Component ```tsx import { Button } from '@blakeui/native'; import { View } from 'react-native'; export default function MyComponent() { return ( console.log('Pressed!')}>Get Started ); } ``` ### 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: ```tsx // 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`](/docs/native/getting-started/provider#raw-provider) — a lightweight provider that excludes `ToastProvider` and `PortalHost`. ## What's Next? - [blakeUI Native Provider](/docs/native/getting-started/provider) - [Styling Guide](/docs/native/getting-started/styling) - [Theming Documentation](/docs/native/getting-started/theming) ## 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](/docs/react/getting-started/quick-start) instead.