# otf-kit vs shadcn/ui — which UI library to pick in 2026

> shadcn/ui is web-only and copy-paste. otf-kit is cross-platform (web + iOS + Android), npm-installed, and ships full kits with auth + Stripe wired. Honest side-by-side comparison.
> Source: https://otf-kit.dev/compare/otf-kit-vs-shadcn-ui

- **Compared with:** shadcn/ui (https://ui.shadcn.com)
- **Verdict:** Pick shadcn/ui if you only ship web and want pure-code ownership. Pick otf-kit if you ship to mobile + web from one codebase, or want a kit that includes auth, payments, and a database wired.
- **Best for:** React Native developers, Cross-platform startups, Design-system buyers comparing kits

## TL;DR

shadcn/ui changed how the React community thinks about component libraries — copy the source into your repo, own it forever, no npm dependency. It's brilliant for web teams who want full control.

otf-kit is a different bet: **the same component API on web *and* native** (Tamagui-powered for React Native, Radix-powered for the web), shipped as proper npm packages, with paid full-stack kits on top. If you're building cross-platform, shadcn/ui doesn't help — its components don't run on iOS/Android. otf-kit does.

## Feature matrix

| | otf-kit | shadcn/ui |
|---|---|---|
| **Platforms** | Web + iOS + Android | Web only |
| **Distribution** | npm (`@otfdashkit/ui`, `@otfdashkit/ui-native`) | Copy-paste source |
| **Component count** | 198+ web · 80+ native (parity API) | 60+ web only |
| **Themes** | 17 design themes shipped, dark mode included | None — bring your own |
| **Full-stack kits** | SaaS Dashboard ($99) · Fitness ($99) — auth + Stripe + Drizzle wired | Nothing — components only |
| **Underlying primitives** | Radix (web) + Tamagui (native) | Radix (web) |
| **Source ownership** | MIT SDK, optional copy-into-repo via `npx create-otf-app` | Copy-paste from CLI |
| **Update model** | `bun update @otfdashkit/ui` | Re-run CLI per component |
| **TypeScript** | Strict, runtime-validated | Strict |
| **AI tooling** | Cursor / Claude Code / Lovable configs pre-wired in every kit | None official |
| **Pricing** | SDK free · Kits $99 each | Free, MIT |

## When shadcn/ui wins

- You're building a **web-only product** and the React Native question doesn't apply.
- You want **zero npm dependency** for your design system. Owning the source by copy-paste is the entire shadcn ethos.
- You're already in the Tailwind ecosystem and your design system needs heavy customization at every step. shadcn's "every component is yours" model is built for this.
- You don't care about kits — you have an existing backend, auth provider, etc.

## When otf-kit wins

- You're shipping **cross-platform** (Expo + Next.js, or Expo + Remix). shadcn doesn't run on RN; otf-kit is designed for parity-API across web and native.
- You want a **full-stack starting point**, not just primitives. Our paid kits include Hono server, Drizzle ORM, Better Auth, Stripe checkout, and demo data — boot to working product in under 30 minutes.
- You'd rather **upgrade via npm** than re-run a CLI for every component update. otf-kit ships proper semver releases.
- You want **17 designed themes** (Linear, Glass, Midnight, Minimal, etc.) out of the box — every component re-renders instantly through the picker.

## What's identical

The web-component DX is intentionally similar. Both libraries:
- Use Radix primitives under the hood
- Lean on Tailwind for styling
- Compose primitives → blocks → layouts the same way
- Ship strict TypeScript
- Are MIT-licensed where source is available

If you've used shadcn/ui, the web side of otf-kit will feel familiar within 5 minutes.

## Code comparison — same `Button` in both

```tsx
// shadcn/ui — copied into your repo
import { Button } from '@/components/ui/button'

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

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

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

Same import shape, same prop API. The difference is whether the source lives in `@/components/` (yours) or `node_modules/` (ours). otf-kit also gives you `npx create-otf-app` to copy the source into your repo if you want shadcn-style ownership.

## Migrating from shadcn/ui to otf-kit

If you're already on shadcn/ui and want cross-platform reach:

1. `bun add @otfdashkit/ui @otfdashkit/tokens`
2. Find-replace `from '@/components/ui'` → `from '@otfdashkit/ui'`
3. Drop the `components/ui/` directory
4. For mobile, install `@otfdashkit/ui-native` and replicate component imports — props match.

[Full migration guide →](/blog/migrating-from-shadcn-to-otf-kit)

## FAQ

**Does otf-kit lock me in?**
No. The SDK is MIT. Kits include source. Run `npx create-otf-app --eject` to copy components into your repo and drop the npm dependency entirely.

**Can I mix otf-kit and shadcn?**
Yes — they share Radix primitives and Tailwind classes. We've done this in production: shadcn for one-off web pages, otf-kit for the cross-platform components.

**Is the native side really at parity with the web side?**
For the 80 components shipped on both: yes. Same prop API, same theme tokens, same accessibility behavior. The web side has 118 web-only components (data grids, etc.) where native equivalents don't make sense yet.

## Try otf-kit

The free SDK works for unlimited components on web + native. The paid kits ($99) ship the full backend.

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