beUI Pro for mobile is live

Explore
beUI Pro

React Native setup

Set up your Expo app once, then install any mobile screen or block from the private registry. The setup matches the free beUI Native guide, with the paths Pro items install to.

Expo SDK, React Native58, 0.88 with React 19
Reanimated and Worklets4.7 and 0.13
Gesture Handler3.3
React Native SVG15.16
Uniwind with Tailwind CSS1.12 with 4.3

1. Install the libraries

Every item animates with Reanimated and styles with Uniwind. Install through Expo so versions match your SDK. A few items need more, such as Skia or Bottom Sheet; each entry page lists its own.

npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg
npm install uniwind tailwindcss

2. Set up Uniwind and the theme

Wrap your Metro config with Uniwind. Expo's Babel preset adds the Worklets plugin, so Expo apps need no Babel change.

JSmetro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withUniwindConfig } = require("uniwind/metro");

const config = getDefaultConfig(__dirname);

// Uniwind must be the outermost wrapper.
module.exports = withUniwindConfig(config, {
  cssEntryFile: "./global.css",
  dtsFile: "./uniwind-types.d.ts",
});

Create global.css at the project root. The theme import points at the tokens the first install adds; if your CSS lives in a subfolder, add an @source for components too.

CSSglobal.css
@import "tailwindcss";
@import "uniwind";
@import "./components/beui-pro/beui/styles/theme.css";

3. Wrap your app

Import global.css once and wrap the app in GestureHandlerRootView, which swipes, drags and sheets need.

TSXapp/_layout.tsx
import "../global.css";

import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

4. Connect the registry and install

Expo apps need a full components.json for the shadcn CLI. Add this one at the project root, then install with your BEUI_PRO_TOKEN from your account.

JSONcomponents.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@beui-pro": {
      "url": "https://pro.beui.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${BEUI_PRO_TOKEN}"
      }
    }
  }
}
export BEUI_PRO_TOKEN="beui_live_xxxxxxxxxxxx"
npx shadcn@latest add @beui-pro/native-tab-bar

Items land in components/beui-pro beside the shared beUI files they import. Prefer files? Download any item, or all of them, from the dashboard.

global.css
metro.config.js
components.json
components/
  beui-pro/
    premium/
      blocks/tab-bar/
    beui/
      hooks/
      styles/
        motion.ts
        theme.css
Open the dashboardGet a Mobile license

5. Load Inter (optional)

Pro items set text with font-sans-medium and similar classes. To match the clips, add these families after the theme in global.css and load the four weights before you render. Skip it to use the system font.

npx expo install @expo-google-fonts/inter expo-font
CSSglobal.css
@theme {
  --font-sans: "Inter_400Regular";
  --font-sans-medium: "Inter_500Medium";
  --font-sans-semibold: "Inter_600SemiBold";
  --font-sans-bold: "Inter_700Bold";
}
TSXapp/_layout.tsx
import {
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  useFonts,
} from "@expo-google-fonts/inter";

const [loaded] = useFonts({
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
});

Try before you install

Every entry in the React Native catalog has a QR code that opens it in Expo Go on your phone, running the same code you install.