Getting started
Install the OTF SDK packages, wire up theming, and ship your first screen.
The OTF SDK is published as scoped packages on npm under @otfdashkit/*. Install the ones
you need for your platform.
Web project (Next.js, Vite, Remix, …)
npm install @otfdashkit/ui @otfdashkit/tokensAdd the token CSS import before the component CSS in your global stylesheet:
@import '@otfdashkit/tokens/web.css';
@import '@otfdashkit/ui/styles';
/* your own styles below */Set the default theme on the document before the first paint so users don't see a flash of unstyled colors:
<script
dangerouslySetInnerHTML={{
__html: `
const t = localStorage.getItem('otf-theme') || 'theme-minimal'
const s = localStorage.getItem('otf-color-scheme') || 'dark'
document.documentElement.className = \`\${t} \${s}\`
`,
}}
/>You're done. Import a component:
import { Persona, Stat, EmptyState } from '@otfdashkit/ui'
export default function Page() {
return (
<div className="p-6 grid gap-4">
<Stat label="Active users" value="12,406" delta="+12%" />
<EmptyState title="No projects yet" description="Create your first project to get started." />
</div>
)
}React Native project (Expo)
npm install @otfdashkit/ui-native @otfdashkit/tokens@otfdashkit/ui-native is built on Tamagui. Wire the provider once in your root layout:
import { OtfProvider, createTamagui, tamaguiDefaultConfig } from '@otfdashkit/ui-native'
const config = createTamagui(tamaguiDefaultConfig)
export default function RootLayout({ children }) {
return <OtfProvider config={config}>{children}</OtfProvider>
}Then import primitives the same way you would on web:
import { YStack, Text, Card } from '@otfdashkit/ui-native'
export default function Screen() {
return (
<YStack padding="$4" gap="$3">
<Text fontSize="$8" fontWeight="700">Welcome</Text>
<Card padding="$4">Hello from OTF.</Card>
</YStack>
)
}Both platforms in one repo
If you're building one product across web + native (which is what the OTF kits do), use a monorepo and consume both packages from the same workspace. Share business logic, screens, and theme tokens — keep platform-specific glue thin. See the Templates page for the canonical layout the kits use.
Learn more
Theme + palette switching
Runtime theme switching across 4 palettes, custom palette authoring, dark/light mapping.
Components — Web
The full @otfdashkit/ui surface — primitives, composites, blocks, and advanced.
Components — Native
Tamagui-styled primitives, layouts, and patterns built for Expo SDK 54.
AI tool integration
CLAUDE.md, .cursorrules, AGENTS.md, lovable.md — kept in sync by @otfdashkit/ai.