OTF UI

One component set for web, iOS and Android. Free, MIT, and easy for your AI agent to build on.

Docs · Storybook · Native showcase · Components · Kits

_{A recording of the live demos (the AI Agent loop is the one on otf-kit.dev), all built on this SDK: the AI Agent and SaaS Dashboard web apps, and the Fitness and Arcade apps for iOS and Android.}

What's inside

240+ components: 150+ web and 85+ native. At least 240, counting only components exported from the npm packages (@otfdashkit/ui and @otfdashkit/ui-native), leaving out stories and tests. Of these, the component gallery documents 109 installable components one by one (90 web and 19 React Native), each with its own install steps.

Part	What you get
Web components	App shells, boards, data tables and charts, calendars, editors, menus and commands, messaging
Native components	The same names and design tokens, rendered natively on iOS and Android
Kits built on it	AI Agent, SaaS Dashboard, Fitness, Arcade, Booking, Marketplace
Agent files	Skills, AGENTS.md conventions, llms.txt and a Markdown mirror of the docs

<Button> from @otfdashkit/ui on the web and <Button> from @otfdashkit/ui-native on iOS and Android share a name and one set of design tokens. You import the same component names on every platform. Each package keeps the props that suit its platform, so check a component's page when you port a screen.

Quick start (30 seconds)

Web (Next.js, Vite, Remix)

npm install @otfdashkit/ui @otfdashkit/tokens
npm install -D tailwindcss@3 tailwindcss-animate postcss autoprefixer

The web components are styled with Tailwind CSS v3. Add the OTF preset, the animation plugin and the component sources to your Tailwind config:

// tailwind.config.ts
import animate from 'tailwindcss-animate'
import { otfPreset } from '@otfdashkit/tokens/tailwind-preset'

export default {
  presets: [otfPreset],
  plugins: [animate],
  content: ['./src/**/*.{ts,tsx}', './node_modules/@otfdashkit/ui/src/**/*.{ts,tsx}'],
}

Add a postcss.config.mjs with export default { plugins: { tailwindcss: {}, autoprefixer: {} } }, and keep the usual @tailwind base; @tailwind components; @tailwind utilities; lines in your global stylesheet. Then import the two stylesheets once and use the components:

import '@otfdashkit/tokens/web.css'
import '@otfdashkit/ui/styles'
import { Button, Card, Input } from '@otfdashkit/ui'

export function SignInCard() {
  return (
    <Card>
      <Input placeholder="Email" />
      <Button size="lg">Continue</Button>
    </Card>
  )
}

iOS and Android (Expo)

npm install @otfdashkit/ui-native @otfdashkit/tokens
npx expo install react-native-svg react-native-safe-area-context

import { OTFProvider, Button, Card, Input } from '@otfdashkit/ui-native'

export default function App() {
  return (
    <OTFProvider>
      <Card>
        <Input placeholder="Email" />
        <Button variant="primary" size="$4">Continue</Button>
      </Card>
    </OTFProvider>
  )
}

On native, one <OTFProvider> at the root is all the setup. On the web, it's the Tailwind preset above plus the two CSS imports; the getting started guide covers theme switching.

Real apps built with it

Every screen below is a live demo you can click through. They are the six OTF kits, complete apps built on this SDK.

AI agent workspace Agents with skills, memory, tools and credits · live demo	SaaS issue board Board, backlog and dashboard on sample data · live demo
Fitness summary Activity rings, stats and workouts, native · live demo	Arcade store Featured carousel, genres and game detail · live demo
Booking calendar Providers, availability and bookings · live demo	Dashboard blocks Metrics, boards and a command menu to start from · all blocks

_{The first two and the blocks are web. Fitness, Arcade and Booking are Expo apps for iOS, Android and the web from one codebase; so is the Marketplace kit.}

Packages

The component gallery lists all 109 installable components with install steps for each one. Blocks (full page sections) and patterns (motion and effects) are listed separately at /blocks and /patterns.

Package	Platform	What
@otfdashkit/ui	Web	90 installable components, counted from the shared component registry: forms, overlays, data tables, charts, calendar, editor.
@otfdashkit/ui-native	iOS · Android	19 React Native components, with names and design tokens shared with web. One <OTFProvider> at the root.
@otfdashkit/tokens	Both	17 palette definitions, CSS variables on web, native tokens on mobile.
@otfdashkit/cli	Mobile	Copies heavy components (shaders, worklets) into your project as source, so you only install the native libraries you use.
@otfdashkit/eslint-plugin-otf-design	Tooling	Flags hard-coded hex colors and stock blue, purple and gray utility classes at lint time.

Try it on your phone

• Browser: native-preview.otf-kit.dev shows the native showcase in a phone frame. Each screen has its own Expo Go QR code, so a scan opens the same component on your device.
• Android: install the showcase app from otf-kit.dev/download.

Works with Claude Code and Cursor

Your agent reads the same files you do. These are in the repo or on the site today:

What	Where	What it gives your agent
Agent Skills	npx skills add otf-kit/skills (source)	The otf-ui, otf-ui-native, otf-tokens and otf-cross-platform-ui skills, for Claude Code, Cursor, Codex and other skills-compatible agents
Component conventions	packages/ui-native/AGENTS.md	Where components live, the authoring rules, and what belongs in the SDK
llms.txt	otf-kit.dev/llms.txt	An index of every docs and component page
Markdown mirror	add /md/ and .md to any path, e.g. otf-kit.dev/md/docs.md	Any page on the site as plain Markdown
Design lint	eslint-plugin-otf-design	Stops generated code from adding hard-coded colors

Build a settings screen with a profile form, a danger zone and a theme picker.
Use @otfdashkit/ui on web and @otfdashkit/ui-native in the Expo app.

Theming

@otfdashkit/tokens ships 17 palette definitions, including Mono, Ocean Teal, Warm Amber and Cosmic Night. On the web, four of them are ready-made CSS classes:

<html class="theme-cosmic dark">   <!-- theme-slate | theme-warm | theme-cosmic | theme-terminal -->

On native, build themes from any of the 17 with getOtfThemePalettes('ocean-teal') from @otfdashkit/ui-native. See packages/tokens.

Contributing

Bug reports, missing variants and accessibility fixes are welcome. Start with an issue labelled good first issue, then read CONTRIBUTING.md. Questions and ideas go to Discord.

Status

Live on npm and in production: all six OTF kits (AI Agent, SaaS Dashboard, Fitness, Booking, Arcade, Marketplace) are built on it. Versions follow semver; while on 0.x, a minor release can change an API, so pin exact versions in production.

License

MIT for every SDK package: @otfdashkit/ui · @otfdashkit/ui-native · @otfdashkit/tokens · @otfdashkit/cli · @otfdashkit/eslint-plugin-otf-design. The paid OTF kits use a per-developer license, described at otf-kit.dev.