otf-kit vs Radix UI — primitives vs full design system

TL;DR

Radix UI is the headless-primitives library that won — accessibility, focus management, and keyboard nav, all unstyled, all correct. We use it. shadcn/ui uses it. Most modern component libraries use it.

The question isn't "Radix or otf-kit" — it's "do you want to assemble the design layer yourself, or use one we already shipped?" Radix gives you the primitives and asks you to draw the rest. otf-kit ships the same primitives on the web side, plus 17 themes, plus React Native parity (via Tamagui), plus paid kits.

Feature matrix

When Radix wins

• You want a bespoke design system that nobody else has. Designing on top of Radix is the canonical path.
• You only ship to web and the React Native question doesn't apply.
• You're building a library yourself and want the lowest-level accessibility primitives.
• You don't care about themes or kits — just behavior + ARIA.

When otf-kit wins

• You want the same accessibility behavior, but don't want to draw every pixel of every dialog yourself. We did that work.
• You're shipping cross-platform — Radix is web-only. otf-kit ships React Native versions via Tamagui with parity behavior.
• You want 17 designed themes out of the box (Linear, Glass, Midnight, etc.) — not a tokens package waiting for design decisions.
• You want a full-stack kit with auth, payments, and a database wired — Radix is just primitives.

What's identical

The web-side accessibility behavior IS Radix. Every otf-kit web component that uses primitives (Dialog, Popover, Tooltip, Tabs, Toggle, Slider, etc.) is built on @radix-ui/react-* packages directly. Keyboard navigation, focus traps, ARIA — all exactly the same as if you'd used Radix yourself.

If you need to drop down to the primitive layer for something custom, you can still do that — Radix is a peer dependency.

Code comparison — Dialog

// Radix UI — unstyled, you build the look
import * as Dialog from '@radix-ui/react-dialog'

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Confirm</Dialog.Title>
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

// otf-kit — Radix under the hood, designed shell shipped
import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@otfdashkit/ui'

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogTitle>Confirm</DialogTitle>
  </DialogContent>
</Dialog>

Same primitives, less boilerplate.

When you want both

It's not "either-or" — most teams use otf-kit's designed components for the 90% case and drop down to raw Radix when they need a custom interaction. Both ship side by side.

FAQ

Does using otf-kit lock me out of Radix's API? No. Radix is a peer dependency — you can import from @radix-ui/react-* directly any time and mix the layers freely.

Is the React Native side accessibility-equivalent? Tamagui's primitives match Radix's accessibility patterns — focus management, ARIA roles, screen reader behavior. Not identical (RN uses platform accessibility APIs), but at parity for the same component contract.

What's the bundle cost compared to using Radix directly? Roughly the same — otf-kit doesn't add a CSS-in-JS runtime, just Tailwind classes. The Radix primitives are tree-shaken per component.

Try otf-kit

• Free SDK on npm →
• Live component preview →
• Compare otf-kit vs shadcn/ui →
• Compare otf-kit vs Chakra UI →