A Free, Open-Source UI SDK That Works the Same on Web and React Native
There is a free, MIT-licensed UI SDK where the same component — same name, same props — renders on the web and on React Native. This is what it includes and where it fits.
If you have searched for a free open-source cross-platform UI SDK — something where one component works the same on the web and on React Native — you have probably found the two usual answers and neither of them is quite it. Web-only libraries give you beautiful components that don't run on a phone. React Native libraries give you mobile components with no web story. What's rare is a single, free, open-source SDK where the same component — same name, same props, same result — renders on both.
That SDK exists, it's MIT-licensed, and this page is the straight answer to what it is, what's in it, and where it fits.
What "the same on web and native" actually means
It does not mean one implementation stretched across platforms. It means one interface with a real implementation behind it on each side, shipped together so they can't drift. A <Button variant="primary"> is a <Button variant="primary"> in both places — the web build behaves like the web, the native build behaves like native, but the name, the props, and the visual result are identical. From where you sit (and from where your coding agent sits), it's one component.
That distinction is the whole game, and it's covered in depth in the cross-platform UI guide. The short version: parity you maintain by hand isn't parity — a shared contract released as one thing is.
| Web-only libraries | React Native libraries | A cross-platform SDK | |
|---|---|---|---|
| Runs on web | Yes | No | Yes |
| Runs on iOS / Android | No | Yes | Yes |
| One component API for both | — | — | Yes |
| Kept in sync | n/a | n/a | Released together, one source |
| Cost | Usually free | Usually free | Free, MIT |
What's included
The SDK is more than a handful of buttons. It ships 200+ components across two packages that mirror each other:
- The web package — accessible, themeable components built on proven web primitives: buttons, inputs, dialogs, tabs, and dozens more, plus higher-level composites and full section blocks.
- The native package — the same component surface for React Native: primitives, interface components, layout shells, and higher-level UX patterns (bottom sheets, onboarding, paywalls, and more).
- Shared design tokens — colors, spacing, type, and motion defined once and compiled into the form each platform needs, so a theme switch re-tints both platforms at once.
- AI-tool config — the components ship with structured docs and tested prompts, so a coding agent can read and extend them instead of guessing.
Everything is MIT-licensed. You can use it in a commercial product, with no attribution required.
How to install it
Two ways, your choice:
- npm install — add the package you need (
@otfdashkit/uifor web,@otfdashkit/ui-nativefor React Native) and import components directly. - Copy-paste — pull the source of any component into your repo and own it outright, shadcn-style.
The source and install instructions live in the docs and on GitHub.
Why it's free
The SDK is the free layer on purpose. It's genuinely useful on its own — you can ship a real app on it and never pay anything. The paid products are the full-stack kits built on top of it: complete apps with auth, billing, a database, and a deploy pipeline already wired. If you only need the component layer, take the free SDK and go. If you want the boring production plumbing already connected, that's what the kits add.
Why "agent-readable" is part of the SDK, not an afterthought
There's one more reason a cross-platform SDK matters more in 2026 than it did a few years ago: you're probably building with a coding agent, and an agent can only keep two platforms in sync if the component is one thing it can read. Two separate web and native codebases double the surface the agent has to reason about, and it will produce two implementations that drift. One component with one API — documented so the agent can pick it up — is the difference between an agent that extends your design system and one that quietly forks it. That's the same reason the workflow and its context files are the real product, and it's baked into how the SDK ships.
Frequently asked questions
- Is there a free open-source UI library that works on both web and React Native?
- Yes. The OTF SDK is free and MIT-licensed, with the same component API on web and React Native — you write a component once (same name, same props) and it renders on both. It ships as npm packages you can install, or copy-paste the source.
- How is a cross-platform UI SDK different from shadcn or a React Native library?
- shadcn-style libraries are web-only; most React Native libraries are mobile-only. A cross-platform SDK ships one component API with a real web build and a real native build behind it, released together — so your web and mobile stay in sync instead of drifting as two separate codebases.
- Is it really free, and what's the catch?
- The SDK is genuinely free and MIT-licensed — use it in commercial projects, no attribution required. It's the lead magnet: the paid products are the full-stack kits built on top of it. You can ship an app on the free SDK alone and never buy anything.