Expo

Install the package into an Expo app.

Scaffolded with create-expo-app -e with-router-uniwind? Metro is already wrapped: add step 2's lines to its src/global.css and skip step 3.

Install the packages

bun add @delacour/react-native-uibunx expo install @legendapp/list expo-linear-gradient react-native-gesture-handler react-native-keyboard-controller react-native-pulsar react-native-reanimated react-native-safe-area-context react-native-svg react-native-teleport react-native-worklets uniwindbun add @central-icons-react-native/round-outlined-radius-1-stroke-1.5 tailwindcss

The library and every native peer. expo install resolves each native module to the version your SDK builds.

Create the CSS entry

src/global.css
@import "tailwindcss";
@import "uniwind";
@import "@delacour/react-native-ui/styles";

@source "./**/*.{ts,tsx}";
@source "../node_modules/@delacour/react-native-ui/src";

The second @source points Tailwind at the library. In a monorepo use the package's real path — Tailwind's scanner does not follow symlinks.

Wrap Metro with Uniwind

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

const config = getDefaultConfig(__dirname);

module.exports = withUniwindConfig(config, {
  cssEntryFile: "./src/global.css",
  dtsFile: "./src/uniwind-types.d.ts",
});

withUniwindConfig must be the outermost wrapper.

Mount the provider

src/app/_layout.tsx
import "../global.css";
import { DelacourProvider } from "@delacour/react-native-ui/provider";
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <DelacourProvider>
      <Stack screenOptions={{ headerShown: false }} />
    </DelacourProvider>
  );
}

The CSS import is the first statement. Both mistakes here fail silently: no CSS, nothing is styled; no provider, presses stop landing.

Use a component

src/app/index.tsx
import { Button } from "@delacour/react-native-ui/button";
import { useState } from "react";
import { View } from "react-native";

export default function Index() {
  const [count, setCount] = useState(0);

  return (
    <View className="flex-1 items-center justify-center bg-background">
      <Button onPress={() => setCount(count + 1)}>Pressed {count} times</Button>
    </View>
  );
}

Import from subpaths — @delacour/react-native-ui/<component>. There is no package-wide barrel.

Build and run

bunx expo run:ios

A native build, not Expo Go. expo run:android for Android.

Check the wiring

bunx delacour@latest doctor

Names the file and the fix for anything that fails silently.

On this page