React Native

Installation

1. 01Point the CLI at the registry

   @corsair-native is not in the shadcn directory, so the app's components.json names it. The aliases resolve through the paths in tsconfig.json (the Expo template's "@/*": ["./*"] puts items in components/ui, lib and hooks). The Tailwind fields stay empty: the items use StyleSheet.

   {
     "style": "new-york",
     "rsc": false,
     "tsx": true,
     "tailwind": {
       "config": "",
       "css": "",
       "baseColor": "neutral",
       "cssVariables": true,
       "prefix": ""
     },
     "aliases": {
       "components": "@/components",
       "ui": "@/components/ui",
       "lib": "@/lib",
       "hooks": "@/hooks",
       "utils": "@/lib/utils"
     },
     "registries": {
       "@corsair-native": "https://kevingirelli.github.io/corsair-ui/r/native/{name}.json"
     }
   }

2. 02Install the native modules

   Expo picks the versions your SDK expects, which is why the items list these without one. This is all of them; each item's page lists the ones it needs.

   $npx expo install expo-haptics react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets

3. 03Add the theme, then what you need

   Every item arrives with the Corsair items it uses. lib/theme.ts holds the colours, radii, type and springs: change primary, primaryForeground and ring to brand the app. Components follow the device's light or dark mode; ThemeProvider forces one.

   $npx shadcn@latest add @corsair-native/theme @corsair-native/button

   See everything from the terminal:

   $npx shadcn@latest list @corsair-native

4. 04Wrap the app

   Items that follow a gesture need a GestureHandlerRootView at the root; the toasts and the drawer sit inside the SafeAreaProvider. Mount the Toaster once, last.

   import { GestureHandlerRootView } from "react-native-gesture-handler";
   import { SafeAreaProvider } from "react-native-safe-area-context";
   
   import { Toaster } from "@/components/ui/toast";
   
   export default function RootLayout() {
     return (
       <GestureHandlerRootView style={{ flex: 1 }}>
         <SafeAreaProvider>
           {/* your screens */}
           <Toaster />
         </SafeAreaProvider>
       </GestureHandlerRootView>
     );
   }

Try them on a phone

Compatibility

Expo SDK

54 and 57, both checked in CI

React Native

0.81 and 0.86, New Architecture

Web

Expo's web target, through react-native-web

Styling

StyleSheet and theme tokens, no Tailwind

On the web, the same components ship as Corsair UI, for React with Tailwind CSS.