Installation

1. Create an Expo app (or use yours)

   terminal

   npx create-expo-app@latest my-appcd my-app

   Starting fresh? npx @expokit/cli@latest init my-app creates the app and does the next step for you.

2. Initialise ExpoKit

   Creates components.json (where files go) and the @/ import alias in tsconfig.json. It detects whether your app uses src/.

   npmpnpmyarnbun

   $npx @expokit/cli@latest init

3. Add components

   Each component is copied to src/components/ui, together with the shared theme file src/lib/kit.tsx and anything else it builds on. Missing packages (like react-native-svg) are installed with npx expo install.

   terminal

   npx @expokit/cli@latest add floating-input otp-input buttonnpx @expokit/cli@latest add --list

4. Use it

   src/app/index.tsx

   import { View } from "react-native";import { FloatingInput } from "@/components/ui/floating-input";import { OtpInput } from "@/components/ui/otp-input";import { Button } from "@/components/ui/button"; export default function Verify() {  return (    <View      style={{ flex: 1, justifyContent: "center", padding: 24, gap: 16 }}    >      <FloatingInput        label="Phone number"        keyboardType="phone-pad"      />      <OtpInput onComplete={(code) => console.log(code)} />      <Button variant="accent" size="lg" block>Verify</Button>    </View>  );}

5. Optional: theme it

   Components follow the system light / dark mode out of the box. Wrap your app to set a brand colour and radius.

   src/app/_layout.tsx

   import { Stack } from "expo-router";import { KitProvider } from "@/lib/kit"; export default function RootLayout() {  return (    <KitProvider accent="#6366f1" radius={14}>      <Stack />    </KitProvider>  );}

Charts#

Charts ship as an npm package. Install it next to its only native peer, which Expo Go already includes.

npx expo install expo-charts react-native-svg

Wrap your app in <ChartProvider> for palettes and light / dark, then see Usage & config.