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

> Radix UI ships unstyled, accessible primitives. otf-kit builds on those same primitives — adds design, themes, kits, and React Native parity. Honest comparison of what each gives you.
> Source: https://otf-kit.dev/compare/otf-kit-vs-radix-ui

- **Compared with:** Radix UI (https://www.radix-ui.com)
- **Verdict:** Pick Radix UI if you want to design every pixel yourself and only ship to web. Pick otf-kit if you want Radix's accessibility under the hood plus 17 themes, native parity, and full-stack kits.
- **Best for:** Teams building bespoke design systems, React Native developers, Engineers comparing primitive layers vs full kits

## 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

| | otf-kit | Radix UI |
|---|---|---|
| **Layer** | Full design system | Headless primitives only |
| **Platforms** | Web + iOS + Android | Web only |
| **Component count** | 198+ web · 80+ native | ~30 primitives |
| **Pre-built styling** | 17 themes shipped | None — bring your own |
| **Accessibility** | Inherited from Radix (web) + Tamagui (native) | Best-in-class — the source of truth |
| **Keyboard nav** | Inherited from Radix | Inherited from Radix |
| **Themes / Tokens** | 17 picker-driven themes + token system | Themes package available separately |
| **Full-stack kits** | SaaS Dashboard ($99) · Fitness ($99) | None |
| **TypeScript** | Strict, runtime-validated | Strict |
| **Pricing** | SDK free · Kits $99 each | Free, MIT |

## 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

```tsx
// 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>
```

```tsx
// 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 →](https://www.npmjs.com/package/@otfdashkit/ui)
- [Live component preview →](/components)
- [Compare otf-kit vs shadcn/ui →](/compare/otf-kit-vs-shadcn-ui)
- [Compare otf-kit vs Chakra UI →](/compare/otf-kit-vs-chakra-ui)