otf-kit vs Tamagui — primitives vs full design system

TL;DRCopy Anchor Link

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 19 designed native components on top, plus 17 themes, plus web parity via Radix, plus paid kits.

Feature matrixCopy Anchor Link

When Tamagui winsCopy Anchor Link

• 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 winsCopy Anchor Link

• You want 19 designed native components out of the box, not just primitives. We did the design work.
• You want 17 swappable themes picker-driven (Mono, Ocean Teal, Warm Amber, Cosmic Night, and others), 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 identicalCopy Anchor Link

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 nativeCopy Anchor Link

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

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

// 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:

// 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 bothCopy Anchor Link

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.

FAQCopy Anchor Link

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.

Engine + primitives vs the designed kit we shippedCopy Anchor Link

otf-kit is built on Tamagui for native — plus designed components, themes, web parity, and full-stack kits. Tamagui is the cross-platform styling engine and unstyled primitives — assemble the design system yourself.

Everything Bundle — $149
Fitness Kit — $99 — Auth, DB, workouts — live demo ready

Live demos: Fitness Kit · SaaS Dashboard

See full pricing · Free SDK on GitHub →