otf-kit vs NextUI / HeroUI — picking a UI library in 2026
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.
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 ($149) · Fitness ($149) | None |
| Animation | Motion + GSAP integrations | Framer Motion (built in) |
| Pricing | SDK free · Kits $149 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
// HeroUI
import { Button } from '@heroui/react'
<Button color="primary" variant="solid">Click me</Button>// 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:
bun add @otfdashkit/ui @otfdashkit/tokens- Most HeroUI props (
color,size,variant,radius) map 1:1 to otf-kit equivalents. - Animations: HeroUI's built-in motion → otf-kit ships Motion presets you wire per-component.
- Use the 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.