# otf-kit vs gluestack-ui — universal RN + web components

> gluestack-ui is the universal React Native + web component library from the team behind NativeBase. otf-kit is a competing universal kit — different engine (Tamagui vs gluestack-style), more themes, full-stack kits.
> Source: https://otf-kit.dev/compare/otf-kit-vs-gluestack-ui

- **Compared with:** gluestack-ui (https://gluestack.io)
- **Verdict:** Pick gluestack-ui if you're already in the NativeBase / gluestack ecosystem and want their copy-paste styling model. Pick otf-kit if you want Tamagui's compile-time optimization, 17 themes, and a full-stack kit with auth + Stripe wired.
- **Best for:** React Native developers, Cross-platform startups, Teams choosing between universal RN+web kits

## TL;DR

gluestack-ui is the most direct head-to-head with otf-kit on the universal RN+web axis. It's built by the team behind NativeBase, ships ~30 components, and uses a copy-paste styling model similar to shadcn/ui's. Strong DX, active community.

The differences come down to engine choice (otf-kit uses Tamagui — true compile-time extraction; gluestack uses its own utility classes), component coverage (otf-kit ships ~3× more), and product shape (otf-kit pairs with paid full-stack kits; gluestack is components-only).

## Feature matrix

| | otf-kit | gluestack-ui |
|---|---|---|
| **Platforms** | Web + iOS + Android | Web + iOS + Android |
| **Component count** | 198+ web · 80+ native | ~30 universal |
| **Distribution** | npm | Copy-paste via CLI |
| **Underlying engine** | Tamagui (native) · Radix (web) | gluestack-style + NativeWind |
| **Compile-time optimization** | Yes — Tamagui static extraction | Partial — NativeWind compiles classes |
| **Themes** | 17 picker-driven themes | Theme tokens + default |
| **Full-stack kits** | SaaS Dashboard ($99) · Fitness ($99) | None |
| **Update model** | `bun update @otfdashkit/ui-native` | Re-run CLI per component |
| **TypeScript** | Strict, runtime-validated | Strict |
| **Pricing** | SDK free · Kits $99 each | Free, MIT |

## When gluestack-ui wins

- You want **copy-paste source ownership** for every component — same ethos as shadcn/ui, just universal.
- You're already using **NativeBase** and migrating; gluestack is the official successor.
- You prefer **NativeWind-driven styling** over Tamagui's `styled()` API — they're both valid, but the syntax is different.
- You don't need broad component coverage — 30 components is enough.

## When otf-kit wins

- You need **broader component coverage** — 198 web / 80 native vs gluestack's ~30.
- You want **17 designed themes** (Linear, Glass, Midnight, Minimal, etc.) — picker-driven, runtime-swappable.
- You want **proper npm distribution** so you can `bun update` your design system in one command instead of re-running a CLI per component.
- You want a **full-stack starting point** — our paid kits include Hono + Drizzle + Better Auth + Stripe + demo data.

## Code comparison — Button

```tsx
// gluestack-ui (after CLI copy)
import { Button, ButtonText } from '@/components/ui/button'

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

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

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

## What's identical

Both libraries solve the same hard problem: parity component API across web and React Native. Both ship strict TypeScript. Both lean on a token system. Both are MIT-licensed.

If you've shipped with gluestack-ui, the otf-kit native API will feel familiar within an afternoon.

## Migrating from gluestack-ui to otf-kit

Most components map 1:1. The biggest mental shift:

- **Styling**: gluestack uses NativeWind class strings; otf-kit uses Tamagui's prop-based or className-based API on native, Tailwind on web.
- **Compound components**: gluestack splits components into `<Button>` + `<ButtonText>` + `<ButtonIcon>`; otf-kit defaults to a single `<Button>` with `text` and `icon` slots.
- **Themes**: gluestack tokens → otf-kit tokens via the [Design Token Migrator →](/tools/design-token-migrator).

## FAQ

**Is otf-kit faster than gluestack-ui at runtime?**
Both libraries do compile-time work to flatten styles, so runtime cost is comparable. Tamagui's static extraction is more aggressive on native; the win on bundle size is small but real.

**Can I use gluestack and otf-kit in the same app?**
Technically yes, but they fight over theme tokens and styling. Pick one per app.

**Which has better DataTable?**
otf-kit's SaaS Dashboard kit ships a TanStack Table-based `<DataTable>`. gluestack-ui doesn't ship a table primitive — you compose your own.

## 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 NativeWind →](/compare/otf-kit-vs-nativewind)