How to install and set up @astrawind/ui in your Expo or React Native app.
Install the packages
In an Expo or React Native app (React 19+, React Native 0.78+, the New Architecture):
npx expo install @astrawind/ui @astrawind/css lucide-react-native react-native-svg react-native-safe-area-context
react-hook-form is needed only for Form.
Add the provider
Wrap your app in ThemeProvider. It applies shadcn's theme variables, light and dark mode and the base text styles, and mounts the portal host that dialogs, menus, popovers and toasts render into.
import { Slot } from "expo-router"
import { View } from "@astrawind/css"
import { ThemeProvider } from "@astrawind/ui"
export default function RootLayout() {
return (
<ThemeProvider defaultTheme="system" baseColor="neutral">
<View className="flex-1 bg-background">
<Slot />
</View>
</ThemeProvider>
)
}
Use a component
Import components from the package root, or one at a time:
import { Button } from "@astrawind/ui/button"
export function Save() {
return <Button onPress={() => save()}>Save changes</Button>
}
Style your own views with the same Tailwind classes, using View, Text and Pressable from @astrawind/css.