Introduction

Touch-first mobile React components built with Tailwind CSS, Base UI, and a copy-paste registry.

fort-ui gives you copy-pasteable React components inspired by clean Cupertino mobile ergonomics: hairline separators, tactile press states, restrained surfaces, and accessible keyboard navigation via Base UI.

fort-ui is an independent open-source project and is not affiliated with or endorsed by Apple Inc.

Architecture

Web Registry (registry/web): Touch-first React components built with Tailwind CSS and @base-ui/react.
Expo / React Native (registry/native): Native components using StyleSheet and useFortTheme() sharing the same semantic token names (bg, surface, tint, separator).
Registry & CLI: npm run registry:build builds free Web and Native items into public/r/ and protected Pro items into server/r/pro/ served behind /api/r/pro/[name], while packages/cli provides the fort-ui CLI (init, add, list, auth).

Installation

1. Using the `fort-ui` CLI

Initialize configuration, lib/utils.ts, and --fort-* CSS tokens automatically:

npx fort-ui init
npx fort-ui add button

While testing locally from this repository before publishing packages/cli to npm, run npm link inside packages/cli or use the workspace script:

npm run fort-ui -- init --cwd /path/to/your-app
npm run fort-ui -- add button --cwd /path/to/your-app

You can also install directly from any static registry URL with shadcn:

npx shadcn@latest add https://fortui.my.id/r/button.json

2. Manual CSS Tokens

If you configure styles manually, paste these tokens into globals.css:

:root {
  --fort-bg: #f2f2f7;
  --fort-surface: #ffffff;
  --fort-surface-muted: #e5e5ea;
  --fort-surface-pressed: #d1d1d6;
  --fort-label: #111113;
  --fort-label-secondary: #52525b;
  --fort-separator: rgba(60, 60, 67, 0.14);
  --fort-tint: #0066cc;
  --fort-tint-text: #0055b3;
  --fort-tint-soft: rgba(0, 102, 204, 0.12);
  --fort-destructive: #d70015;
  --fort-destructive-text: #c20013;
  --fort-destructive-soft: rgba(215, 0, 21, 0.11);
  --fort-switch-on: #248a3d;
  --fort-switch-off: rgba(120, 120, 128, 0.28);
  --fort-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --font-fort-sans: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.dark {
  --fort-bg: #000000;
  --fort-surface: #1c1c1e;
  --fort-surface-muted: #2c2c2e;
  --fort-surface-pressed: #3a3a3c;
  --fort-label: #f5f5f7;
  --fort-label-secondary: #a1a1aa;
  --fort-separator: rgba(255, 255, 255, 0.14);
  --fort-tint: #0a66d6;
  --fort-tint-text: #4da3ff;
  --fort-tint-soft: rgba(77, 163, 255, 0.16);
  --fort-destructive: #d70015;
  --fort-destructive-text: #ff6961;
  --fort-destructive-soft: rgba(255, 105, 97, 0.16);
  --fort-switch-on: #289e47;
  --fort-switch-off: rgba(120, 120, 128, 0.38);
}

.fort-ui {
  font-family: var(--font-fort-sans);
}