# otf-kit vs React Native Paper — picking an RN UI library

> React Native Paper is the dominant Material Design library for React Native. otf-kit is a non-Material alternative with 17 themes, web parity, and full-stack kits — same component coverage, different design language.
> Source: https://otf-kit.dev/compare/otf-kit-vs-react-native-paper

- **Compared with:** React Native Paper (https://reactnativepaper.com)
- **Verdict:** Pick React Native Paper if your app needs to look like Material Design and you're RN-only. Pick otf-kit if you want bespoke design (17 themes, none Material), web parity, or a full-stack kit with auth and Stripe wired.
- **Best for:** React Native developers, Teams not committed to Material Design, Cross-platform startups

## TL;DR

React Native Paper is the most-installed Material Design component library for React Native. It's mature (60+ components), well-maintained, fully accessible, and the safe pick if your product must look Material.

The catch is the same as with MUI on the web: you inherit Google's Material Design language and an opinionated visual signature. otf-kit is the bespoke-design, multi-theme, cross-platform alternative — same component coverage, no Material lock-in, plus a parity web side.

## Feature matrix

| | otf-kit | React Native Paper |
|---|---|---|
| **Platforms** | Web + iOS + Android | iOS + Android only |
| **Component count** | 80+ native (198+ web) | ~60 native |
| **Design language** | 17 picker-driven themes | Material Design 3 |
| **Engine** | Tamagui (compile-time) | StyleSheet + custom renderer |
| **Web rendering** | Radix-based web parity | None — RN-only |
| **Themes** | 17 themes runtime-swappable | Light + dark + custom |
| **Full-stack kits** | SaaS Dashboard ($99) · Fitness ($99) | None |
| **Pricing** | SDK free · Kits $99 each | Free, MIT |

## When React Native Paper wins

- Your app **must look Material** (Google ecosystem, internal tooling, brand alignment).
- You want the **most battle-tested RN component library** — Paper has been around since 2017 and is heavily used.
- You're **RN-only** with no web parity needs.
- You need Paper-specific surfaces like `<DataTable>` (their built-in is solid for simple cases) or `<FAB.Group>`.

## When otf-kit wins

- You **don't want Material Design** — you want a bespoke look across mobile and web.
- You're shipping **cross-platform** (Expo + Next.js). Paper is RN-only; you'd need a parallel web component system.
- You want **17 swappable themes** picker-driven (Linear, Glass, Midnight, etc.).
- You want a **full-stack kit** that includes the backend, auth, and payments — not just components.

## Code comparison — Button

```tsx
// React Native Paper
import { Button } from 'react-native-paper'

<Button mode="contained" onPress={onClick}>Click me</Button>
```

```tsx
// otf-kit
import { Button } from '@otfdashkit/ui-native'

<Button variant="default" onPress={onClick}>Click me</Button>
```

The web side has the identical import shape:

```tsx
// otf-kit on web
import { Button } from '@otfdashkit/ui'

<Button variant="default" onClick={onClick}>Click me</Button>
```

## Migrating from RN Paper to otf-kit

Most components map cleanly. The main work is restyling — Material Design tokens (`primary`, `surface`, `onSurface`) need to be ported to otf-kit's CSS-variable token system via the [Design Token Migrator →](/tools/design-token-migrator).

| RN Paper | otf-kit |
|---|---|
| `<Button mode="contained">` | `<Button variant="default">` |
| `<TextInput>` | `<Input>` + `<Label>` |
| `<Card>` | `<Card>` |
| `<Modal>` / `<Dialog>` | `<Dialog>` |
| `<DataTable>` | `<DataTable>` (TanStack, in SaaS kit) |
| `<FAB>` | Compose `<Button>` + Tamagui positioning |
| `<Snackbar>` | `<Toast>` |

## FAQ

**Is otf-kit's accessibility on RN as good as Paper's?**
Paper has a long track record on RN accessibility. otf-kit's RN side uses Tamagui primitives which mirror Paper's accessibility patterns (focus management, screen reader behavior, hit slop). Equivalent for typical use; Paper has more edge cases ironed out.

**Does otf-kit support Material You / dynamic colors?**
Not out of the box — that's a Paper-specific feature tied to Material Design 3. If you need it, Paper is the right call.

**What about react-native-elements / RNUI Lib?**
Different competitors — see [otf-kit vs react-native-ui-lib →](/compare/otf-kit-vs-react-native-ui-lib).

## Try otf-kit

- [Free SDK on npm →](https://www.npmjs.com/package/@otfdashkit/ui-native)
- [Live component preview →](/components)
- [Compare otf-kit vs Tamagui →](/compare/otf-kit-vs-tamagui)
- [Compare otf-kit vs MUI →](/compare/otf-kit-vs-mui)