# Install the code

Each stack is one folder in the download. Install its core, copy in the components you use, and wrap the app in the theme once.

## What you need

| Stack | Needs | Installed | Copied in |
| --- | --- | --- | --- |
| React Native | Expo SDK 58, Node 22.13 or newer | `@appetite-ui/core` and `@appetite-ui/tokens`, two .tgz files | The components, `react-native/source/react-native/src` |
| SwiftUI | iOS 17, macOS 14 | The `swiftui` folder as a local package, product `AppetiteCore` | The files of `components/` you use |
| Flutter | Flutter 3.47+, Dart 3.13+ | The `flutter` folder as the path dependency `appetite_ui` | Nothing: `lib/components` is source inside the package |
| Jetpack Compose | Kotlin 2.4, Compose 1.12 (BOM 2026.09.00), minSdk 24 | The module `:core` | The module `:components`, or single files of it |

## React Native with Expo

Built with Expo SDK 58. Start from the starter app, or add the kit to your own Expo app.

1. The starter app has the library wired in and the fonts loaded. Run it from the `starter` folder.

```bash
cd starter
npm install          # or: pnpm install
npx expo start
```

2. In your own app, copy `react-native/appetite-ui-core-1.0.0.tgz` and `react-native/appetite-ui-tokens-1.0.0.tgz` into the app, for example `vendor/`, and add both to `dependencies`.

```json
"@appetite-ui/core": "file:./vendor/appetite-ui-core-1.0.0.tgz",
"@appetite-ui/tokens": "file:./vendor/appetite-ui-tokens-1.0.0.tgz"
```

3. Install the peer dependencies at the versions your SDK wants.

```bash
npx expo install expo-blur expo-haptics expo-font react-native-svg react-native-safe-area-context expo-status-bar
```

4. Copy `react-native/source/react-native/src` into the app as `src/appetite-ui/` and map the name in `tsconfig.json`.

```json
"paths": { "@appetite-ui/react-native": ["./src/appetite-ui/index.ts"] }
```

5. Run `npm install` (or `pnpm install`).

Load the fonts with `useFonts(appetiteFonts)` and wrap the app in `AppetiteProvider`, with `ToastProvider` inside it if the app shows toasts.

```tsx
import type { ReactNode } from 'react';
import { useFonts } from 'expo-font';
import { AppetiteProvider, ToastProvider, appetiteFonts } from '@appetite-ui/react-native';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';

function Provider({ children }: { children: ReactNode }) {
  const insets = useSafeAreaInsets();
  return (
    <AppetiteProvider safeAreaInsets={{ top: insets.top, bottom: insets.bottom }}>
      <ToastProvider insets={insets}>{children}</ToastProvider>
    </AppetiteProvider>
  );
}

export default function App() {
  const [fontsLoaded] = useFonts(appetiteFonts);
  if (!fontsLoaded) return null;
  return (
    <SafeAreaProvider>
      <Provider>{/* your app */}</Provider>
    </SafeAreaProvider>
  );
}
```

## SwiftUI

iOS 17 and macOS 14. AppetiteCore is the installed part; the components are source you copy into your target.

1. Add the `swiftui` folder as a local package (product `AppetiteCore`): Xcode, File > Add Package Dependencies > Add Local.
2. Copy the files of `components/` you use into your app target, with the shared `AppetiteGlyph.swift`, `AppetiteTouch.swift`, `AppetiteLineBox.swift`, `AppetiteEffects.swift`, `AppetiteField.swift` and `AppetiteMotionMap.swift`.
3. The tokens and fonts in `core/` are synced from the token export. Do not edit them.

Apply the theme at the root. It follows the system, the iOS conventions and the Figma brand; the Inter fonts register with the first `.appetiteTheme()`.

```swift
import AppetiteCore

ContentView()
    .appetiteTheme()                                     // follows the system, ios conventions, Figma brand
    // .appetiteTheme(scheme: .dark, platform: .material, brand: AppetiteBrand(color: "#0f766e", radiusScale: 1))
```

## Flutter

Flutter 3.47+ and Dart 3.13+. One package, appetite_ui, with the theme, the tokens, the Inter fonts and the components.

1. Copy the `flutter` folder into the app, add it as a path dependency (`appetite_ui: {path: ...}`), then run `flutter pub get`.
2. Inter is declared in the package's `pubspec.yaml`. The token file, `lib/core/tokens/appetite_tokens.dart`, is synced: do not edit it.

Wrap the app in `AppetiteScope`. Read the theme anywhere below it with `AppetiteTheme.of(context)`.

```dart
import 'package:appetite_ui/appetite.dart';

AppetiteScope(
  colorScheme: AppetiteColorScheme.system, // or light / dark
  platform: AppetitePlatform.ios,          // ios | material, default from the OS
  brand: const AppetiteBrand(color: '#155dfc', radiusScale: 1),
  child: MyApp(),
)
```

## Jetpack Compose

Kotlin 2.4, Compose 1.12 (BOM 2026.09.00) and minSdk 24. The core module holds the theme, the tokens and the fonts; the components module is source.

1. Copy the `compose` folder into the project and include both modules.

```kotlin
include(":core", ":components")
```

2. Depend on the components. Or take single component files into your own module.

```kotlin
implementation(project(":components"))
```


Wrap the app in `AppetiteTheme`. `AppetiteTheme.current` gives the colors and text styles.

```kotlin
AppetiteTheme(
    colorScheme = AppetiteSchemePreference.System, // or Light / Dark
    platform = AppetitePlatformStyle.Material,      // Ios | Material, default from the OS
    brand = AppetiteBrand(color = "#155dfc", radiusScale = 1f),
) { MyApp() }
```

## Use a component

Every component page shows the call in each stack under Figma and code, for example [Button](https://www.appetiteui.com/docs/button).