# otf-kit vs Tamagui — primitives vs full design system

> Tamagui is the cross-platform styling and primitives engine that powers React Native at parity with web. otf-kit is built on top of Tamagui — adds 17 themes, 80+ designed native components, web parity via Radix, and full-stack kits.
> Source: https://otf-kit.dev/compare/otf-kit-vs-tamagui

- **Compared with:** Tamagui (https://tamagui.dev)
- **Verdict:** Pick Tamagui if you want raw primitives and full control to design every component yourself. Pick otf-kit if you want Tamagui's cross-platform engine plus 80 designed native components, web parity, and a full-stack kit.
- **Best for:** React Native developers, Cross-platform startups, Teams comparing primitive layers vs designed kits

## TL;DR

Tamagui is the engine behind otf-kit's React Native side. It's the cross-platform styling system that solved the "Tailwind for React Native" problem before NativeWind existed — single style API, true compile-time optimization, parity primitives across web and native.

The honest comparison isn't "Tamagui or otf-kit" — it's "do you want to assemble the design layer yourself, or use one we already shipped?" Tamagui gives you the engine and ~30 unstyled primitives. otf-kit ships 80 designed components on top, plus 17 themes, plus web parity via Radix, plus paid kits.

## Feature matrix

| | otf-kit | Tamagui |
|---|---|---|
| **Layer** | Full design system | Engine + primitives only |
| **Platforms** | Web + iOS + Android | Web + iOS + Android |
| **Component count** | 198+ web · 80+ native | ~30 primitives |
| **Designed themes** | 17 picker-driven themes | Theme system + a single starter |
| **Compile-time optimization** | Inherits Tamagui's static extraction | Yes — the original implementation |
| **Web rendering** | Radix primitives where useful | Tamagui primitives |
| **Full-stack kits** | SaaS Dashboard ($99) · Fitness ($99) | None |
| **Pricing** | SDK free · Kits $99 each | Free, MIT |

## When Tamagui wins

- You want to **build your own design system** from scratch on the cross-platform engine. Tamagui's `createTokens` + `styled()` API is the canonical path.
- You want the **smallest possible runtime** — using just Tamagui's primitives gives you the leanest universal RN+web bundle.
- You're a **library author** building reusable cross-platform components.
- You don't need themes or kits — engine + primitives is enough.

## When otf-kit wins

- You want **80+ designed native components** out of the box, not just primitives. We did the design work.
- You want **17 swappable themes** picker-driven (Linear, Glass, Midnight, etc.), not a tokens object you fill in yourself.
- You want **web-and-native parity** via Radix on the web side. Tamagui can render to web but Radix is more battle-tested for web accessibility.
- You want a **full-stack starting point** — our paid kits include Hono server + Drizzle ORM + Better Auth + Stripe + demo data.

## What's identical

The React Native side of otf-kit IS Tamagui under the hood. Every native component uses `styled()` from `@tamagui/core`, the theme system is Tamagui's, the cross-platform compilation is Tamagui's. If you've used Tamagui, the otf-kit native API will feel native within minutes.

If you need to drop down to raw Tamagui for something custom, you can — `@tamagui/core` is a peer dependency.

## Code comparison — Button on native

```tsx
// Tamagui — primitive, you bring the design
import { Button } from 'tamagui'

<Button size="$4" theme="active">Click me</Button>
```

```tsx
// otf-kit — Tamagui primitive + designed shell
import { Button } from '@otfdashkit/ui-native'

<Button variant="default" size="md">Click me</Button>
```

The web side trades Tamagui for Radix:

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

<Button variant="default" size="md">Click me</Button>
```

Same prop API across platforms.

## When you want both

It's not "either-or" — most teams use otf-kit's designed components for the 80% case and drop to raw Tamagui when they need a custom interaction. Both ship side by side and share the same theme tokens.

## FAQ

**Why Radix on web instead of Tamagui's web target?**
Tamagui can render to web, but Radix has been the accessibility/keyboard-nav standard for years on web specifically. Using Radix on web + Tamagui on native gets us the best-of-both — Radix's web pedigree, Tamagui's RN pedigree.

**Can I write Tamagui `styled()` components alongside otf-kit?**
Yes — they share the same theme tokens. You can wrap otf-kit components in Tamagui's `styled()` factory.

**Does otf-kit's themes work with raw Tamagui components?**
Yes — both consume the same `createTokens()` output. Drop a `<Theme>` from `@tamagui/core` and otf-kit components inherit it.

## Try otf-kit

The free SDK works for unlimited components on web + native.

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