Fleet UI

A production-ready, fully animated React Native UI SDK with Unistyles

📖 Documentation · 🎯 Introduction · 🚀 Quick Start · 🇰🇷 한국어

---

What is Fleet UI?

Fleet UI is a UI SDK for React Native that bundles theming (react-native-unistyles) + animation (react-native-reanimated) + components into a seamless workflow.

It helps you build production-ready UIs faster while maintaining a consistent design based on minimalism and fluid animations.

Core Design Philosophy

• Universal Minimalism: A minimal visual language centered on mobile UI/UX that looks natural anywhere.
• Radical Simplicity: Design so naturally that users operate it without thinking.

---

✨ Features

Main Features

Feature	Description
🎨 Trendy Design	Production-ready design, iOS-inspired universal animations
🎬 Animated	Smooth animations written with Reanimated only. High performance
🛠️ Customizable	Easy to customize components for your own purposes
📦 Few Dependencies	Only need to import configuration file and Unistyles, no provider needed
📋 Copy-Paste	Copy and paste only what you need
🧩 Modular	Install only what you need

What Fleet UI Provides

Fleet UI isn't just a "component collection"—it also provides the system those components depend on.

• Mobile-first design: Includes common mobile screen patterns
• Theme/token system: Tokens designed in the raw → primitive → semantic → theme flow
• Variants system: Combine axes like colorScheme / variant / size ... for predictable styles
• Accessibility (A11y) defaults: role/state/interaction patterns aligned consistently
• Motion/interaction defaults: Reanimated-based motion as component default behavior

Also Supports

• ✅ Cross-Platform: Works seamlessly on iOS, Android, and Web
• ✅ Type-Safe: Full TypeScript support
• ✅ Themeable: Built-in light/dark mode support with Unistyles

---

📦 Packages

Package	NPM	Description
@fleet-ui/cli		CLI tool for local installation
@fleet-ui/core		Theme, tokens, and Unistyles configuration
@fleet-ui/components		UI component library

---

🚀 Quick Start

Fleet UI offers 2 installation tracks:

• Track A (Local Install): Use CLI to bring code into your project, then modify/override it "like your own code" (like shadcn/ui)
• Track B (Package Install): Install via package manager, update through version upgrades

💡 Recommendation: Track A is easier to manage in most cases. See Choose a Track for guidance.

Track A (CLI-Based Local Install)

# Initialize Fleet UI core
pnpm dlx @fleet-ui/cli init

# Add components
pnpm dlx @fleet-ui/cli add Button Modal

# Validate configuration
pnpm dlx @fleet-ui/cli doctor

Your entry file (app/_layout.tsx for Expo Router) will include:

import '@fleet-ui/local/core/unistyles';

Track B (Package Install)

# Install packages
pnpm add @fleet-ui/core @fleet-ui/components

Add to your entry file:

import '@fleet-ui/core/unistyles';

Required Dependencies (Both Tracks)

pnpm add react-native-unistyles react-native-reanimated react-native-gesture-handler react-native-worklets

Optional dependencies (for specific components):

# Expo environments
npx expo install expo-blur expo-image expo-linear-gradient react-native-safe-area-context react-native-svg

---

🎨 Token System

Fleet UI uses a hierarchical token system designed for consistency, ease of change, and reduced decision cost.

Raw Value → Primitive → Semantic → Theme → (Component Consumption)

Layer	Description
Raw Value	Actual values (colors, numbers)
Primitive	Rule-based minimal unit tokens (spacing scale, radius scale, color palette)
Semantic	Purpose/context-based tokens (background/text/border/action/state)
Theme	Final bundle used at runtime (light/dark)

Reference Rules

• ✅ Only reference lower layers (no reverse direction)
• ✅ No circular references
• ✅ Components consume only semantic where possible
• ✅ Minimize layer skipping

Learn more in the Token Architecture documentation.

---

💻 Usage Example

import { Text, View } from 'react-native';
import { StyleSheet, useUnistyles } from 'react-native-unistyles';

const styles = StyleSheet.create((theme) => ({
  container: {
    backgroundColor: theme.colors.neutral.content_1,
    padding: theme.spacing[4],
    borderRadius: theme.rounded.md,
  },
  title: {
    ...theme.typography.body1,
    color: theme.colors.neutral.text_1,
    fontWeight: theme.text.fontWeight.semibold,
  },
}));

export function Example() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Fleet UI</Text>
    </View>
  );
}

---

📚 Documentation

Visit the official documentation for comprehensive guides:

Section	Description
Introduction	What Fleet UI solves and its design philosophy
Quick Start	Choose the right track for your team
Installation	Step-by-step installation guide
Fundamental	Understanding the design system structure
Theming	Theme registration and style composition
Token Architecture	Token hierarchy and file structure
FAQ	Common setup and build issues

---

🎮 Playground

Test components in a real React Native environment:

# Start the playground
pnpm --filter playground start

# Run on iOS
pnpm --filter playground ios

# Run on Android
pnpm --filter playground android

# Run on Web
pnpm --filter playground web

---

🏗️ Development

Prerequisites

• Node.js >= 20.19.4
• pnpm >= 9.0.0

Setup

# Clone the repository
git clone https://github.com/Rengod95/Fleet-UI.git
cd Fleet-UI

# Install dependencies
pnpm install

# Build all packages
pnpm build

Development Workflow

# Watch mode for all packages
pnpm dev

# Run tests
pnpm test

# Type check
pnpm typecheck

# Lint
pnpm lint

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

---

📄 License

This project is licensed under the Apache License 2.0 with Commons Clause.

✅ You CAN:

• Use this SDK to build and ship your mobile applications (commercial or free)
• Modify the code for your own app's needs

🚫 You CANNOT:

• Sell this SDK itself or a derivative version of it
• Create a commercial UI toolkit, template, or design system product based on this code

For more details, please see the LICENSE file.

© Rengod95

---

🔗 Links

Resource	Link
GitHub Repository	github.com/Rengod95/Fleet-UI
Documentation	fleet-ui.dev
NPM - @fleet-ui/cli	npmjs.com/package/@fleet-ui/cli
NPM - @fleet-ui/core	npmjs.com/package/@fleet-ui/core
NPM - @fleet-ui/components	npmjs.com/package/@fleet-ui/components

---

💡 Inspiration

Fleet UI was built following best practices from:

• React Native
• Expo
• React Native Unistyles
• React Native Reanimated
• shadcn/ui

---

Made with ❤️ for React Native developers