🐱 Leshi UI

Modern CLI for React Native — Build beautiful React Native apps with copy-paste components, comprehensive theming, and excellent developer experience.

✨ Features

🎨 Copy-paste components — Own your code, don't depend on packages
🚀 Professional CLI — Intuitive command patterns with npx leshi-ui@latest
⚡️ Zero runtime overhead — Only copy the components you actually use
🎭 Comprehensive theming — 25+ themes with light/dark mode support
📱 React Native + Web — Works everywhere React Native does
🎨 StyleSheet + Unistyles — Choose your preferred styling approach
🧠 Smart dependency resolution — Automatic component dependency management
📖 Built-in documentation — Component guides and examples included
🔧 100% TypeScript — Fully typed with zero TypeScript errors
🌟 Professional UX — Beautiful CLI with colors, emojis, and helpful messages

🚀 Quick Start

No installation required! Use directly with any package manager:

# React Native StyleSheet (default)
npx leshi-ui@latest init

# Unistyles variant
npx leshi-ui@latest init --unistyles

1. Initialize Your Project

# Initialize with React Native StyleSheet
npx leshi-ui@latest init

# Initialize with Unistyles
npx leshi-ui@latest init --unistyles

# Skip confirmation prompts
npx leshi-ui@latest init --yes

2. Add Components

# Add a single component
npx leshi-ui@latest add component button

# Add multiple components
npx leshi-ui@latest add component button text modal

# Add with Unistyles
npx leshi-ui@latest add component button --unistyles

# Overwrite existing files
npx leshi-ui@latest add component button --overwrite

3. Explore and Learn

# List all available components
npx leshi-ui@latest list component

# Get detailed component guide
npx leshi-ui@latest guide component button

# List all available themes
npx leshi-ui@latest list theme

# Learn about the theme system
npx leshi-ui@latest guide theme

📋 Commands Reference

Initialization

# Initialize with React Native StyleSheet
npx leshi-ui@latest init [--rn] [--yes]

# Initialize with Unistyles  
npx leshi-ui@latest init --unistyles [--yes]

Components

# Add components (with automatic dependency resolution)
npx leshi-ui@latest add component <name> [--rn|--unistyles] [--overwrite] [--yes]

# List all components
npx leshi-ui@latest list component [--rn|--unistyles]

# Component documentation
npx leshi-ui@latest guide component <name>

Themes

# Add themes
npx leshi-ui@latest add theme <name> [--rn|--unistyles] [--overwrite] [--yes]

# List all themes
npx leshi-ui@latest list theme [--rn|--unistyles]

# Theme system guide
npx leshi-ui@latest guide theme

Package Manager Support

npx leshi-ui@latest <command>     # npm
bunx leshi-ui@latest <command>    # bun  
pnpm dlx leshi-ui@latest <command> # pnpm
yarn dlx leshi-ui@latest <command> # yarn

🎯 Available Components

Over 18 production-ready components with smart dependency resolution:

Component	Description	Dependencies	External Deps
button	Versatile button with variants and sizes	`text`	None
text	Typography with semantic variants	None	None
modal	Flexible modal with animations	None	`@gorhom/portal`
dialog	Dialog built on modal system	`modal`, `text`, `icon`, `slot`	`@gorhom/portal`
alert-dialog	Confirmation dialogs	`modal`, `text`, `button`, `slot`	`@gorhom/portal`
surface	Container with elevation	None	None
text-input	Input with validation states	`label`, `text`	None
text-area	Multi-line text input	`label`, `text`	None
checkbox	Custom styled checkbox	`icon`	None
switch	Animated toggle switch	None	`react-native-reanimated`
progress	Animated progress bar	None	`react-native-reanimated`
skeleton	Loading skeleton	None	`react-native-reanimated`
avatar	Avatar with fallback	`text`	None
badge	Status badges	`text`	None
divider	Visual separator	None	None
icon	Icon component	`text`	None
label	Form labels	`text`	None
radio	Radio group	`icon`	None
slot	Component composition	None	None
spinner	Loading spinner	None	`react-native-reanimated`

Smart Dependencies: The CLI automatically installs required components and warns about external dependencies.

💡 Built-in Documentation

Every component includes comprehensive documentation accessible via CLI:

# List all components with dependencies and external deps
npx leshi-ui@latest list component

# Get detailed guide for any component
npx leshi-ui@latest guide component button

Component guides include:

📖 Component description and capabilities
🔗 leshi-ui component dependencies (automatically installed)
📦 External npm dependencies (with install instructions)
📋 Step-by-step setup instructions
💻 Setup code examples
💡 Real usage examples

🎨 Comprehensive Theme System

25+ beautiful themes with smart system integration:

# List all available themes (categorized by light/dark)
npx leshi-ui@latest list theme

# Add any theme to your project
npx leshi-ui@latest add theme spotify

# Learn about the theme system
npx leshi-ui@latest guide theme

Theme Features:

🌓 Automatic light/dark switching - Follows system preferences
🎨 25+ pre-built themes - spotify, twitter, supabase, retro, grape, ocean, etc.
🔧 Manual override - defaultMode="manual" for user control
⚡ Performance optimized - Minimal re-renders
🛡️ Type-safe - Full TypeScript theme definitions

Popular themes: spotify, twitter-dark, supabase-light, retro-dark, ocean-light, grape-dark, mono-light

🧑‍💻 Usage Examples

Basic Component Usage

import { Button, Text, Surface } from './components/ui';

function MyComponent() {
  return (
    <Surface variant="accent" padding="lg" radius="md">
      <Text variant="heading" size="lg">
        Welcome to Leshi UI
      </Text>
      <Text variant="body">
        Beautiful components for React Native
      </Text>
      <Button 
        variant="primary" 
        text="Get Started"
        onPress={() => console.log('Hello!')}
      />
    </Surface>
  );
}

Modal & Dialog Components

import { Dialog, Button, Text } from './components/ui';
import { useState } from 'react';

function MyDialog() {
  const [open, setOpen] = useState(false);
  
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger>
        <Button text="Open Dialog" />
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>Confirm Action</Dialog.Title>
        </Dialog.Header>
        <Text>Are you sure you want to continue?</Text>
        <Dialog.Footer>
          <Button variant="outline" text="Cancel" />
          <Button text="Confirm" />
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog.Root>
  );
}

Theme Integration

import { useTheme } from './styles/theme';
import { View, Text } from 'react-native';

function ThemedComponent() {
  const theme = useTheme();
  
  return (
    <View style={{
      backgroundColor: theme.colors.background,
      padding: theme.spacing.lg
    }}>
      <Text style={{ 
        color: theme.colors.text,
        fontSize: theme.fonts.sizes.lg 
      }}>
        Themed content that respects user preferences
      </Text>
    </View>
  );
}

Complete App Setup

// App.tsx or _layout.tsx
import { ThemeProvider } from './styles/context';
import { ModalProvider } from './components/ui/modal';

export default function App() {
  return (
    <ThemeProvider defaultTheme="light" defaultMode="system">
      <ModalProvider>
        <YourApp />
      </ModalProvider>
    </ThemeProvider>
  );
}

⚡️ Architecture & Philosophy

Copy-Paste Approach

Leshi UI follows the proven copy-paste philosophy:

✅ Full ownership - Components live in your codebase, you control everything
✅ Zero runtime overhead - No component library bundle, only what you use
✅ Complete customization - Modify any component to fit your exact needs
✅ No vendor lock-in - Your components, your code, your decisions
✅ Framework flexibility - Choose between StyleSheet or Unistyles

Performance Optimizations

StyleSheet.create() - All RN components use optimized StyleSheet patterns
Unistyles v3 - Modern CSS-in-JS with superior performance
Theme context optimization - Minimal re-renders with smart context design
Platform-specific code - Automatic iOS/Android/Web optimizations
Tree-shakeable by nature - Only install components you actually use

CLI Features

Smart dependency resolution - Automatically installs required components
Professional UX - Colors, emojis, progress indicators, helpful error messages
Framework detection - Automatically detects React Native project type
Built-in documentation - No need for external docs, everything is in the CLI
Universal package manager support - Works with npm, bun, pnpm, yarn

🚀 Publishing & Release

Ready to publish your own version or contribute:

# Smart release with automatic versioning
bun run release 1.2.3

This handles building, testing, publishing to npm, and creating git tags automatically.

👥 Contributing

We welcome contributions! Here's how to get started:

Fork the repository on GitHub
Clone your fork: git clone https://github.com/yourusername/leshi-ui
Create a feature branch: git checkout -b feature/amazing-new-component
Make your changes following our guidelines in AGENTS.md

Test thoroughly:

cd cli && npm run build
node dist/index.js list component
# Test your changes

Commit with clear messages: git commit -m "feat: add amazing new component"
Push and create a Pull Request

Development Guidelines

Component changes: Update both packages/rn/ and packages/unistyles/
CLI changes: Test all commands locally before committing
Registry updates: Add new components to component-notes.json
Demo updates: Showcase new components in apps/demo/
TypeScript: Ensure zero TypeScript errors across all packages

📄 License

MIT License - see LICENSE for details.

🙏 Credits

Built with ❤️ by Agustin Oberg

Bringing excellent developer experience to React Native development.

☕ Support the project

If Leshi UI has been helpful for your projects, consider supporting the development:

Your support helps maintain and improve this project! 🚀

Ready to build something amazing?

npx leshi-ui@latest init

Join the community of developers building beautiful React Native apps with leshi-ui! 🚀

leshi-ui

🐱 Leshi UI

✨ Features

🚀 Quick Start

1. Initialize Your Project

2. Add Components

3. Explore and Learn

📋 Commands Reference

Initialization

Components

Themes

Package Manager Support

🎯 Available Components

💡 Built-in Documentation

🎨 Comprehensive Theme System

🧑‍💻 Usage Examples

Basic Component Usage

Modal & Dialog Components

Theme Integration

Complete App Setup

⚡️ Architecture & Philosophy

Copy-Paste Approach

Performance Optimizations

CLI Features

🚀 Publishing & Release

👥 Contributing

Development Guidelines

📄 License

🙏 Credits

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads