# OTF SDK

> Install the OTF SDK packages @otfdashkit/ui and @otfdashkit/ui-native for web and Expo components.
> Source: https://otf-kit.dev/docs

The OTF SDK has **240+ components (150+ web, 85+ native)**, 109 documented one by one in the gallery. Blocks and patterns are listed separately. OTF is an open-source SDK for building **cross-platform applications** that AI coding tools like
Claude Code, Cursor, Antigravity, and Lovable can extend without breaking. The SDK ships in three
npm packages plus a small set of paid kits that put it all together.

## What's in the box

| Package | Platform | Surface |
| --- | --- | --- |
| [`@otfdashkit/ui`](https://www.npmjs.com/package/@otfdashkit/ui) | Web | 150+ components on Radix + Tailwind CSS v3 |
| [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) | iOS, Android | 85+ components built on Tamagui |
| [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) | Both | Design tokens (color, space, radius, motion) — 17 themes |
| [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@otfdashkit/eslint-plugin-otf-design) | Both | Lints that catch hardcoded hex/spacing in feature code |

## Install the free SDK

The SDK packages are free and MIT-licensed on npm under `@otfdashkit/*`. Install the packages
for your platform using the matching guide:

<Cards>
  <Card title="Web project" href="/docs/getting-started#web-project-nextjs-vite-remix-" description="Get started with Next.js, Vite, or Remix." />
  <Card title="React Native project (Expo)" href="/docs/getting-started#react-native-project-expo" description="Get started with Expo." />
  <Card title="Both platforms in one repo" href="/docs/getting-started#both-platforms-in-one-repo" description="Set up web and native together." />
</Cards>

## Why use it

Most cross-platform UI libraries optimise for either coverage *or* polish. OTF is opinionated:
**a small surface, taken to a high finish.** Every component is reviewed against the
24-item kit-design-checklist before it ships.

- **AI-native by design.** Each kit ships a `CLAUDE.md`, `.cursorrules`, and equivalents — kept in
  sync by the upcoming `@otfdashkit/ai` CLI.
- **Shared component names and design tokens across platforms** where the abstraction is honest.
  Props differ per platform; each component's page lists its own.
- **Production templates included.** Free SDK + five Live paid full-stack kits (SaaS Dashboard,
  Fitness, Arcade, Booking, and Marketplace). The $149 Starter Bundle includes those five kits and all
  15 landing templates ($630 bought separately, save $481).

## Quick links

<Cards>
  <Card title="Getting started" href="/docs/getting-started" description="Install, theme, your first screen — both web and native." />
  <Card title="Components — Web" href="/docs/components/ui/overview" description="The @otfdashkit/ui reference." />
  <Card title="Components — Native" href="/docs/components/ui-native/overview" description="The @otfdashkit/ui-native reference." />
  <Card title="Tokens" href="/docs/tokens/overview" description="Design tokens + palette switching." />
  <Card title="AI tools" href="/docs/ai-tools/overview" description="Claude Code, Cursor, Antigravity, Lovable." />
  <Card title="Templates" href="/docs/templates/overview" description="SaaS Dashboard, Fitness & Wellness, Starter Bundle." />
</Cards>

## Status

Live on npm and in production: all five OTF kits (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.