# otf-kit vs NextUI / HeroUI — picking a UI library in 2026

> NextUI rebranded as HeroUI in 2024 — a beautifully designed React component library built on Tailwind. otf-kit is a cross-platform alternative with React Native parity, a theme picker, and full-stack kits.
> Source: https://otf-kit.dev/compare/otf-kit-vs-nextui

- **Compared with:** HeroUI (NextUI) (https://www.heroui.com)
- **Verdict:** Pick HeroUI if you want a single beautifully-designed default theme on web. Pick otf-kit if you need 17 swappable themes, React Native parity, or a kit with auth + Stripe + a database wired.
- **Best for:** React + React Native developers, Cross-platform startups, Teams comparing modern Tailwind-based UI libraries

## TL;DR

NextUI rebranded as HeroUI in 2024. It's a beautifully-designed React UI library built on Tailwind + React Aria, with a strong default aesthetic and good DX. The catch: web-only, one default theme, no full-stack kits.

otf-kit is built on similar foundations (Tailwind + Radix on web, plus Tamagui on native) but ships **17 swappable themes** out of the box, runs on React Native at parity, and pairs with paid kits that include the full backend.

## Feature matrix

| | otf-kit | HeroUI (NextUI) |
|---|---|---|
| **Platforms** | Web + iOS + Android | Web only |
| **Component count** | 198+ web · 80+ native | ~50 web |
| **Themes** | 17 picker-driven themes | 1 default theme + dark mode |
| **Underlying primitives** | Radix (web) · Tamagui (native) | React Aria |
| **Styling engine** | Tailwind v4 | Tailwind + tailwind-variants |
| **Full-stack kits** | SaaS Dashboard ($99) · Fitness ($99) | None |
| **Animation** | Motion + GSAP integrations | Framer Motion (built in) |
| **Pricing** | SDK free · Kits $99 each | Free, MIT |

## When HeroUI wins

- You love the **HeroUI default look** — it's genuinely beautiful out of the box, and the team behind it has strong taste.
- You want **animation built in** to every component without extra config.
- You're **web-only** and the React Native question doesn't apply.
- You don't need theme variety — one strong default is enough.

## When otf-kit wins

- You need **multiple themes** (Linear, Glass, Midnight, Minimal, plus 13 more) — picker-driven, runtime-swappable.
- You're shipping **cross-platform**. HeroUI doesn't run on RN.
- You want a **full-stack starting point** — our paid kits include Hono server + Drizzle ORM + Better Auth + Stripe checkout + demo data.
- You need **broader component coverage** — 198 components vs HeroUI's ~50.

## Code comparison — Button

```tsx
// HeroUI
import { Button } from '@heroui/react'

<Button color="primary" variant="solid">Click me</Button>
```

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

<Button variant="default" color="primary">Click me</Button>
```

## Migrating from HeroUI to otf-kit

The mental model is similar — both lean on Tailwind variants + a token system. Migration steps:

1. `bun add @otfdashkit/ui @otfdashkit/tokens`
2. Most HeroUI props (`color`, `size`, `variant`, `radius`) map 1:1 to otf-kit equivalents.
3. Animations: HeroUI's built-in motion → otf-kit ships Motion presets you wire per-component.
4. Use the [Design Token Migrator →](/tools/design-token-migrator) to convert HeroUI's theme tokens.

## FAQ

**Is HeroUI's animation a deal-breaker without it in otf-kit?**
otf-kit doesn't enforce animations — we ship Motion (Framer Motion's React-only fork) as a peer dependency and provide presets for hover / tap / page transitions. You opt in per surface; it's not built into every component.

**Does otf-kit use React Aria?**
On web, otf-kit uses Radix. Both Radix and React Aria solve the same problem (accessible primitives) — the difference is mostly community and governance. Behavior is equivalent for typical use.

**What about the HeroUI Pro template kit?**
HeroUI Pro is a separate paid product. otf-kit's kits are equivalent in scope but tend to be more full-stack (auth + database + Stripe wired) than HeroUI's templates.

## Try otf-kit

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