Static markup versus a Button that already has state, focus, and a theme

The compare page puts a button-shaped element on each side and then lists the work that still belongs to you. Tailwind UI, by Tailwind Labs, is the markup. otf-kit is the component that already has the variant, the theme, the focus treatment, and a click prop. This is that code section, plus the rows that explain it, from the page fetched on 28 September 2026. Prices that are not on the compare page come from pricing the same day.

The markup you paste, and the props you do not get

The Tailwind UI sample on the page is a <button> with a long class string. Rounded corners, an indigo background, horizontal and vertical padding, small semibold type, white text, a shadow, a hover indigo, and a focus-visible outline with an offset. The comment above it says you paste this into the project and then wire interactivity yourself.

The otf-kit sample is:

import { Button } from '@otfdashkit/ui'

<Button variant="primary" onClick={...}>Click me</Button>

The page's reading of the pair is specific. Tailwind UI gives you the HTML. You write the variant logic, the click-handler typing, the focus management, and the dark-mode classes. The component arrives with that already configured. It is theme-aware, it works on web and native, and the page says it is accessible by default.

That is the interactivity row of the matrix in one example. Tailwind UI is "static markup only." otf-kit is "full — hooks, state, animations." The TL;DR calls the snippets beautiful and static, and calls otf-kit maintained components: install once, update via npm, with cross-platform support, and with full-stack kits on the paid side.

If your task is a marketing hero that never handles state, the class string is the finished work. The page lists that as the first win: a single static marketing site, beautiful HTML, drop it in. It also lists "proven design patterns with no opinions about state management" as a win. The absence of onClick typing is the feature in that case.

If the button submits, toggles, or lives in a form that already has variants, the class string is the start of the work. Every extra variant is another hand-written class combination. Dark mode is another set of classes. The next bug in the focus ring is yours, because the maintenance cell says the snippet is frozen at copy time.

What the matrix says is actually inside each product

Distribution: npm packages versus copy-paste snippets.

Platforms: web, iOS, and Android versus web only. The web-only cell includes HTML, JSX, and Vue. The page says otf-kit is React-only, and that Vue, raw HTML, and server-rendered non-React setups are a reason to stay with Tailwind UI. That limit is easy to skip if you only read the button sample. A Vue marketing site does not become a React component library because the button markup was tedious.

Maintenance: versioned, bun update, versus frozen at copy time.

Counts: 198+ web and 80+ native, versus about 500 snippets across categories. The page treats these as different objects. Snippets are the catalog. Components are the installed API. More snippets means more layouts you can copy. It does not mean more behavior.

Themes: 17 named themes versus none.

Kits: SaaS at $99 and Fitness at $99, backend wired, versus templates at $249 to $799, frontend only. The win paragraph names the kit stack as Hono, Drizzle, Better Auth, and Stripe.

Source: MIT SDK plus optional --eject, versus yours after purchase.

Pricing model on the compare page: SDK free and kits at $99 each, versus $299 personal or $799 team, one-time.

AI tooling: Cursor, Claude Code, and Lovable configs in every kit, versus none official.

The "what's identical" section keeps the comparison honest. Both use Tailwind. Both are designed by people who care about polish. Both ship valid HTML and accessibility patterns. Both cost money on the upper tier. The page says that if you would buy Tailwind UI for the design quality, the design quality on the otf-kit side is the same neighborhood, with the framework on top.

className is how the pasted classes survive

The migration block is the practical version of "I already paid for these classes."

1. bun add @otfdashkit/ui
2. Find a similar primitive in the catalog at /components (the component catalog).
3. Replace the pasted markup with Button, Card, and the rest.
4. Leave the Tailwind classes you customized. The page says every component accepts a className override.
5. On mobile, mirror imports from @otfdashkit/ui-native.

So a move is not a purge of the indigo scale. The override is the documented way to keep a local visual decision while the variant logic, the focus handling, and the theme live in the package. Updates after that are bun update, which is the maintenance cell. Eject remains the way back to files in the repo if a single component has to leave the package. The matrix calls that optional --eject mode. The SDK line is MIT.

The FAQ says both products can sit in one company. Marketing pages stay as snippets. The product uses the component library. Shared Tailwind is why the page says the styling stays compatible.

The nearer web framework, stated narrowly

Tailwind Plus is the rename of Tailwind UI, according to the page. Catalyst is their React framework, and the page says it overlaps more directly with otf-kit on the web than the snippet catalog does. The differences the page is willing to state: Catalyst is web-only, it does not ship kits, and it is in early access. No price, no component count, and no release date appear next to that sentence, so this article does not add them.

Native is simpler. @otfdashkit/ui-native is the package the page names for iOS and Android. Tailwind UI does not run there. If the button never leaves the browser, that package is irrelevant and the snippet catalog's Vue and HTML flavors stay an advantage.

Kits, and the wiring that is not a button

The page separates "a product" from "a website" in the otf-kit win list. State, animation, accessibility hooks, and theming are the component half of that sentence. The other half is the kit: a starting point whose server is Hono, whose database layer is Drizzle, whose auth is Better Auth, and whose payments are Stripe. Tailwind UI templates, at $249 to $799 on the matrix, are frontend only.

The closing block on the compare page prices the Everything Bundle at $149 and describes SaaS Dashboard as $99, 11 screens, billing wired. Fitness is the other $99 kit in the matrix. Demos: the SaaS demo and the Fitness demo. The free package is the GitHub repo.

Pricing adds the tiers the compare page only samples. Free SDK, \(0: 220+ pieces, 5 design themes in dark and light, full source, the same three AI configs, community support, 1 seat. The 17 named themes are the compare-page matrix. The 5 themes are the free-tier card. Landing template, \)9, one client project. Kit, $99, with SaaS Dashboard, Fitness, and Arcade marked live, login and payments and a database wired, 12 months of updates, one client project, 1 seat. Booking is Preview, via the bundle until it is live. Marketplace is coming soon and is not sold on its own. Bundle, $149 against $531, save $382: 4 kits, all 15 landing templates, lifetime updates, 1 seat. SaaS Dashboard is web. Fitness and Arcade are web plus mobile. Team is custom, 5 seats, unlimited client projects, no printed price.

The FAQ's $299 answer stays the right frame for the snippet side. Worth it for designers shipping marketing sites. A different audience once the button needs state or the repo needs a server.

What to open while you wire the screen

If the screen is static HTML, finish the class string and stop. The page says that is the job Tailwind UI is for, including the case where the framework is not React.

If the screen needs a variant prop, a typed click handler, a focus ring you do not want to own, or a native twin, the sample to copy is the Button import, and the migration is the five steps above. Read them on the compare page next to the full class string. Use pricing when the question turns from the button into a kit.

---

Originally published at otf-kit.dev.