beUI Pro für Mobile ist live

Ansehen
beUI Pro

React-Native-Setup

Richte deine Expo-App einmal ein und installiere dann jeden mobilen Screen oder Block aus der privaten Registry. Das Setup entspricht dem kostenlosen beUI-Native-Guide, mit den Pfaden, in die Pro-Items installiert werden.

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. Bibliotheken installieren

Jedes Item animiert mit Reanimated und wird mit Uniwind gestylt. Installiere über Expo, damit die Versionen zu deinem SDK passen. Einige Items brauchen mehr, etwa Skia oder Bottom Sheet; jede Item-Seite listet ihre eigenen.

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

2. Uniwind und das Theme einrichten

Umschließe deine Metro-Konfiguration mit Uniwind. Das Babel-Preset von Expo fügt das Worklets-Plugin hinzu, daher brauchen Expo-Apps keine Babel-Änderung.

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",
});

Lege global.css im Projektstamm an. Der Theme-Import zeigt auf die Tokens, die die erste Installation hinzufügt. Liegt dein CSS in einem Unterordner, füge auch eine @source für components hinzu.

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

3. App umschließen

Importiere global.css einmal und umschließe die App mit GestureHandlerRootView, das Swipes, Drags und Sheets brauchen.

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. Registry verbinden und installieren

Expo-Apps brauchen für die shadcn CLI eine vollständige components.json. Lege diese im Projektstamm an und installiere dann mit deinem BEUI_PRO_TOKEN aus deinem Konto.

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 landen in components/beui-pro, neben den gemeinsamen beUI-Dateien, die sie importieren. Lieber Dateien? Lade einzelne oder alle Items im Dashboard herunter.

global.css
metro.config.js
components.json
components/
  beui-pro/
    premium/
      blocks/tab-bar/
    beui/
      hooks/
      styles/
        motion.ts
        theme.css
Dashboard öffnenMobile-Lizenz holen

5. Inter laden (optional)

Pro-Items setzen Text mit font-sans-medium und ähnlichen Klassen. Damit es wie in den Clips aussieht, füge diese Familien nach dem Theme in global.css hinzu und lade die vier Schnitte vor dem Rendern. Lass es weg, um die Systemschrift zu nutzen.

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,
});