React Native UI CLI

CLI for React Native UI components, similar to shadcn-ui. Allows you to easily add ready-made components to your React Native project.

Installation

npx chadcn-cli@latest init

Usage

Initialize project

npx chadcn-cli@latest init

This command:

• Checks that you are in a React Native project
• Creates the components/ui/ folder
• Creates a configuration file chadcn.config.js

Add components

npx chadcn-cli@latest add button

Available components

• button - Button with various variants and sizes

Button component

Props

interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  onPress?: () => void;
  style?: ViewStyle;
  textStyle?: TextStyle;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

Usage examples

import { Button } from './components/ui';

// Primary button
<Button onPress={() => console.log('Pressed!')}>
  Press me
</Button>

// Button with variant
<Button variant="secondary" size="lg" onPress={handlePress}>
  Large button
</Button>

// Button with loading
<Button loading onPress={handleAsyncPress}>
  Load data
</Button>

// Button with icon
<Button leftIcon={<Icon name="heart" />} onPress={handleLike}>
  Like
</Button>

Configuration

The chadcn.config.js file allows you to configure the theme and dependencies:

module.exports = {
  components: './components/ui',
  
  theme: {
    colors: {
      primary: '#007AFF',
      secondary: '#5856D6',
      // ... other colors
    },
    spacing: {
      xs: 4,
      sm: 8,
      md: 16,
      lg: 24,
      xl: 32,
    },
    borderRadius: {
      sm: 4,
      md: 8,
      lg: 12,
      xl: 16,
    },
  },
  
  dependencies: {
    'react-native-vector-icons': '^10.0.0',
    'react-native-reanimated': '^3.0.0',
  },
};

Dependencies

CLI automatically adds necessary dependencies to package.json:

• react-native-vector-icons - for icons
• react-native-reanimated - for animations

After adding components, run:

npm install

Development

# Install dependencies
npm install

# Build CLI
npm run build

# Development in watch mode
npm run dev

License

MIT