Both Button examples on the compare page use variant="default". The fork is what that import means for the repo six months from now, and whether the product has to run on a phone. These four checks are that page, read on 28 September 2026, plus pricing from the same day.
Fork 1: is the product web-only?
The page is blunt about platforms. shadcn/ui is web only. otf-kit is web, iOS, and Android. The native package is @otfdashkit/ui-native. The web package is @otfdashkit/ui. The page says the web side sits on Radix and the native side sits on Tamagui, with one component API across both.
That single row ends the debate for a lot of teams. If the app is a Next.js or Remix site and nobody has an Expo ticket on the board, shadcn/ui is in its home territory. The page lists that case first under "when shadcn/ui wins": a web-only product where the React Native question does not apply. It also says the components do not run on iOS or Android. There is no partial credit there. You do not get a degraded native build. You get no native build.
If the plan is Expo plus Next.js, or Expo plus Remix, the same page says shadcn/ui does not help and otf-kit is built for a parity API across web and native. "Parity" on this page is specific. For the 80 components shipped on both sides, the prop API, the theme tokens, and the accessibility behavior match. The web side then has another 118 components that are web-only, things like data grids, where a native equivalent does not make sense yet. The matrix rounds the web count as 198+ and the native count as 80+. shadcn/ui is listed as 60+ web components.
Write down the surfaces you will ship in the next two quarters. If iOS and Android are absent, the web-only path fits. If they are on the list, the copy-paste library stops at the browser.
Fork 2: do you want the source in the repo, or a version you can bump?
This is the part shadcn/ui is famous for, and the page treats it as a real advantage rather than a slogan. The distribution row says shadcn/ui is copy-paste source, and the ownership row says you copy it in from the CLI. The update row says you re-run the CLI per component. The win condition next to that is explicit: you want zero npm dependency for the design system, and owning the source by copy-paste is the whole point.
otf-kit's matching rows are different. Distribution is npm, packages @otfdashkit/ui and @otfdashkit/ui-native. The update command on the page is bun update @otfdashkit/ui. The source-ownership row says the SDK is MIT, and you can still copy the source into the repo with npx create-otf-app. The FAQ goes one step further: npx create-otf-app --eject copies the components into the repo and drops the npm dependency. Kits include source. The page's line is that the SDK does not lock you in.
Copy-paste means a component changes when you re-run the CLI and reconcile the diff against your local edits. The page lists that as the win when you are already in Tailwind and every component needs heavy customization. The npm path is bun update against semver releases, and you can still eject later if one component needs to become a local file.
The Button snippet on the page is the whole visual difference:
// copied into the repo
import { Button } from '@/components/ui/button'
// installed from npm
import { Button } from '@otfdashkit/ui'
Same variant prop. The page says the difference is whether the source lives in @/components/ or in node_modules/. If you want the first layout and also want the cross-platform packages, the migration section is short: bun add @otfdashkit/ui @otfdashkit/tokens, replace from '@/components/ui' with from '@otfdashkit/ui', delete components/ui/, and for mobile install @otfdashkit/ui-native because the props match.
Fork 3: are you styling a product, or also starting the product?
shadcn/ui, on this page, is components only. The kits cell says "Nothing." The fourth win condition says you do not care about kits because you already have a backend and an auth provider.
otf-kit's kits cell names two products at $99 each: SaaS Dashboard and Fitness, with auth, Stripe, and Drizzle wired. The longer paragraph under "when otf-kit wins" lists the stack inside those kits: a Hono server, Drizzle ORM, Better Auth, Stripe checkout, and demo data. The page says that boots to a working product in under 30 minutes. Every kit also ships Cursor, Claude Code, and Lovable configs pre-wired. The shadcn/ui cell on that row says none official.
Themes are the other gap. The matrix says otf-kit ships 17 design themes, dark mode included, and shadcn/ui ships none: bring your own. The named examples on the page are Linear, Glass, Midnight, and Minimal. The claim next to them is that every component re-renders through the picker. If your design system is already a custom Tailwind setup, "bring your own" is a feature. If you wanted a starting theme you can swap at runtime, the 17 are the feature.
Both libraries, the page says, use Radix on the web, lean on Tailwind, compose primitives into blocks into layouts, ship strict TypeScript, and are MIT-licensed where source is available. otf-kit's TypeScript cell adds "runtime-validated" next to strict. The page also says that if you have used shadcn/ui, the web side will feel familiar within 5 minutes. Mixing is allowed: they share Radix primitives and Tailwind classes. The page says that combination has been used in production, with shadcn/ui on one-off web pages and otf-kit on the cross-platform components. I am reporting that sentence from the page, not adding a case study.
Fork 4: what does the money line actually buy?
On the compare page, shadcn/ui is free and MIT. The otf-kit SDK is free. The kits are $99 each. The page's closing block prices the Everything Bundle at $149 and describes SaaS Dashboard as $99 with 11 screens and billing wired. Live demos linked from the page are the SaaS demo and the Fitness demo. The free SDK is the GitHub repo.
Pricing, fetched the same day, is the ladder behind those numbers. The free SDK is $0: 220+ pieces, 5 design themes in dark and light, full source, AI configs for Cursor, Claude, and Lovable, community support, 1 developer seat. A landing template is $9, one client project, 1 seat. A kit is $99. SaaS Dashboard, Fitness, and Arcade are listed as live, with login, payments, and a database wired, 12 months of updates, one client project, and 1 seat. Booking is Preview, and the page says to use the bundle until it is live. Marketplace is coming soon and is not sold on its own.
The bundle is $149 against a $531 figure, save $382: 4 delivered kits plus all 15 landing templates. SaaS Dashboard is web, Fitness and Arcade are web plus mobile, and Booking is included when it is live. Bundle updates are lifetime. The seat count is still 1. Team is custom for 5 seats and unlimited client projects, with no dollar amount printed.
The compare page's 17 design themes and the free SDK's 5 design themes are both on the sites today. Use 17 when you are reading the component matrix. Use 5 when you are reading the free-tier card.
How to leave the checklist
Answer the four forks in order. Web-only, and you want the files in components/ui with no package to bump: stay. The page's own win list is web-only, zero npm dependency, heavy per-component customization, and an existing backend.
Cross-platform, or you want semver, or you want the Hono, Drizzle, Better Auth, and Stripe kit instead of assembling that yourself: the page points you at otf-kit, with eject still available. The component catalog is at the component catalog if you want to see the pieces before the kit.
The full matrix, the Button pair, and the migration steps are on the compare page. Read that before you change the import. Prices and what each tier includes are on pricing.
Top comments (0)