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

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

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

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

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

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

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 ($149) ship the full backend.

• Free SDK on npm →
• Live component preview →
• Compare otf-kit vs Mantine →
• Compare otf-kit vs NativeWind →