What you get

• 80 primitives — Button, Card, Input, Avatar, Badge, Chip, Sheet, Switch, Tabs, Toast, Text, Stack — same names and props as the web SDK
• Apple-Fitness-style blocks — ActivityRings, WeekStrip, StepperBig, MetricCard, SegmentedControl, MiniBarChart
• Animated patterns — shaders, marquees, parallax scrolls (heavy peers ship via @otfdashkit/cli so you only pay for what you use)
• 17 shared themes — same @otfdashkit/tokens palette as web; switch palette via the defaultTheme prop on <OTFProvider>
• One codebase, three targets — Expo Router app renders on iOS, Android, and web export

Live demos

• native-preview.otf-kit.dev — full showcase in a phone frame with per-route Expo Go QR (scan, land on the same component on a real device)
• fitness-preview.otf-kit.dev — production fitness app built end-to-end with this package

Install

pnpm add @otfdashkit/ui-native @otfdashkit/tokens
# or:  npm install @otfdashkit/ui-native @otfdashkit/tokens
# or:  bun add @otfdashkit/ui-native @otfdashkit/tokens

npx expo install react-native-svg react-native-safe-area-context

Quick start

// App.tsx
import { OTFProvider, Button, Card, Input } from '@otfdashkit/ui-native'

export default function App() {
  return (
    <OTFProvider>
      <Card>
        <Input placeholder="Email" />
        <Button variant="primary" size="lg" onPress={handlePress}>
          Continue
        </Button>
      </Card>
    </OTFProvider>
  )
}

One root, sensible defaults — the provider wires up OTF tokens, dark mode, and font config so your screens just render. The same component names and props work on web (@otfdashkit/ui); porting a screen is a one-line import change.

Cross-platform parity

| Component | Web (@otfdashkit/ui) | Native (@otfdashkit/ui-native) | |---|---|---| | <Button> | variant + size, focus-visible ring | press states, haptic-ready, same prop API | | <Card> | nested-ring surface | elevation tokens, same prop API | | <Input> | error / hint / floating-label | error / hint / floating-label, Reanimated spring | | <Avatar> | image + initials fallback | image + initials fallback | | <Text> | typography scale tokens | typography scale tokens |

Both read from @otfdashkit/tokens — flip the theme on web and native at once.

Theming

<OTFProvider defaultTheme="ocean-teal">
  <YourScreens />
</OTFProvider>

All 17 themes from @otfdashkit/tokens are available — pick at the provider, switch at runtime with useThemeName().

Advanced — custom config

For users who need to derive a custom merged config (extra fonts, custom tokens, animation driver tweaks):

import { OTFProvider, createOTFConfig, otfConfig } from '@otfdashkit/ui-native'

const config = createOTFConfig({
  ...otfConfig,
  fonts: { /* your font set */ },
})

<OTFProvider config={config}>
  <YourScreens />
</OTFProvider>

Heavy-peer components

Skia shaders, Reanimated worklets, MMKV, Notifee — anything that would force every consumer to install peers they don't need — ships through @otfdashkit/cli instead of npm. Source-copy install, no forced peers:

npx @otfdashkit/cli init
npx @otfdashkit/cli add shockwave

Works with

• Claude Code, Cursor, Lovable, Bolt — every component ships structured JSDoc + tested prompts in ai/prompts/, including Expo Go imports, safe-area handling, and theme tokens

Related packages

• @otfdashkit/ui — web counterpart, same component API
• @otfdashkit/tokens — shared design tokens
• @otfdashkit/cli — heavy-peer component installer

Community

discord.gg/gpXyu7SqNZ — questions, bugs, feature requests.

Status

v0.1.x — alpha. APIs may change before 1.0. Pin exact versions in production.

License

MIT. You own the source. Eject any time. Copyright © otfdashkit.