Install the code

What you need

One folder per stack in the download. Install the core, copy the components in.

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.

   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.

   "@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.

   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.

   "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.

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().

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).

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.

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

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

   implementation(project(":components"))

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

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. The names and props are the Figma file's.