@rn-shad/cli

A command-line interface for adding premium React Native components to your project.

Features

• 🚀 Quick Setup - Initialize your project in seconds
• 📦 30+ Components - All essential and advanced components
• 🎨 Theme Support - Preview and manage color themes
• 🔍 Health Checks - Validate your project setup
• 📱 Universal - Works on iOS, Android, and Web
• ⚡ Smart Dependencies - Auto-install required packages
• 🎯 Type-Safe - Full TypeScript support

Installation

npx @rn-shad/cli@latest init

Or install globally:

npm install -g @rn-shad/cli

Commands

init

Initialize your project with rn-shad components.

npx @rn-shad/cli init

This command will:

• Create a components.json configuration file
• Install required dependencies (Reanimated, Gesture Handler, SVG, Icons)
• Set up Babel module resolver for @ imports
• Configure TypeScript path aliases
• Create utility files

Options:

• -y, --yes - Skip prompts and use defaults
• -d, --defaults - Use default configuration

add

Add components to your project.

# Add a single component
npx @rn-shad/cli add button

# Add multiple components
npx @rn-shad/cli add button input card

# Add all components
npx @rn-shad/cli add --all

# Interactive selection
npx @rn-shad/cli add

Options:

• -a, --all - Add all components
• -y, --yes - Skip confirmation prompts
• -o, --overwrite - Overwrite existing files

theme

Preview and manage themes.

npx @rn-shad/cli theme

Available themes:

• Zinc (Default)
• Slate

doctor

Check your project setup and dependencies.

npx @rn-shad/cli doctor

This command checks:

• package.json existence
• React Native installation
• Required dependencies (Reanimated, Gesture Handler, SVG)
• Icon library installation
• Configuration files
• Utils file

Available Components

Core Components (15)

1. Button - Customizable button with variants and animations
2. Input - Text input with icons and labels
3. Card - Container with header, content, footer
4. Text - Typography with variants and colors
5. Badge - Status indicator with variants
6. Avatar - User avatar with fallback
7. Switch - Animated toggle
8. Checkbox - Selection control with animations
9. Alert - Notification banner
10. Skeleton - Loading placeholder
11. Progress - Progress bar
12. Spinner - Loading spinner
13. Dialog - Modal dialog
14. Sheet - Bottom sheet
15. Toast - Toast notification

Advanced Components (15)

16. Select - Dropdown select
17. Combobox - Autocomplete input
18. Dropdown Menu - Context menu
19. Popover - Floating content
20. Tooltip - Hover/press hint
21. Tabs - Tab navigation
22. Accordion - Collapsible sections
23. Form - Form wrapper
24. Label - Form label
25. Radio Group - Radio buttons
26. Slider - Range input
27. DatePicker - Date selection
28. Calendar - Calendar view
29. Command - Command palette
30. Table - Data table

Platform Compatibility

All components are designed to work across iOS, Android, and Web platforms. However, some components have platform-specific behaviors or limitations:

| Component | iOS | Android | Web | Notes | |-----------|-----|---------|-----|-------| | Core Components | | | | | | Button | ✅ | ✅ | ✅ | Full support, haptics on native | | Input | ✅ | ✅ | ✅ | Full support, platform-specific keyboards | | Card | ✅ | ✅ | ✅ | Full support | | Text | ✅ | ✅ | ✅ | Full support | | Badge | ✅ | ✅ | ✅ | Full support | | Avatar | ✅ | ✅ | ✅ | Full support | | Switch | ✅ | ✅ | ✅ | Full support, animated | | Checkbox | ✅ | ✅ | ✅ | Full support, animated | | Alert | ✅ | ✅ | ✅ | Full support | | Skeleton | ✅ | ✅ | ✅ | Full support, animated | | Progress | ✅ | ✅ | ✅ | Full support, animated | | Spinner | ✅ | ✅ | ✅ | Full support, animated | | Dialog | ✅ | ✅ | ✅ | Full support, modal on all platforms | | Sheet | ✅ | ✅ | ⚠️ | Limited gesture support on web | | Toast | ✅ | ✅ | ✅ | Full support | | Advanced Components | | | | | | Select | ✅ | ✅ | ⚠️ | Positioning may differ on web | | Combobox | ✅ | ✅ | ⚠️ | Keyboard behavior differs on web | | Dropdown Menu | ✅ | ✅ | ⚠️ | Positioning may differ on web | | Popover | ✅ | ✅ | ⚠️ | Positioning calculated differently | | Tooltip | ✅ | ✅ | ⚠️ | Hover vs press behavior | | Tabs | ✅ | ✅ | ✅ | Full support | | Accordion | ✅ | ✅ | ✅ | Full support | | Form | ✅ | ✅ | ✅ | Full support | | Label | ✅ | ✅ | ✅ | Full support | | Radio Group | ✅ | ✅ | ✅ | Full support | | Slider | ✅ | ✅ | ⚠️ | Touch vs mouse interaction | | DatePicker | ✅ | ✅ | ⚠️ | Native pickers on mobile, custom on web | | Calendar | ✅ | ✅ | ✅ | Full support | | Command | ✅ | ✅ | ✅ | Full support, keyboard shortcuts | | Table | ✅ | ✅ | ✅ | Full support, scrollable |

Legend:

• ✅ Full support - Works identically across platforms
• ⚠️ Partial support - Works but with platform-specific behavior or limitations
• ❌ Not supported - Does not work on this platform

Platform-Specific Notes

iOS:

• All gestures and animations work smoothly
• Haptic feedback available on interactive components
• Native keyboard handling

Android:

• All gestures and animations work smoothly
• Platform-specific styling (ripple effects where appropriate)
• Native keyboard handling
• Text alignment optimizations applied automatically

Web:

• Most components work well on web
• Gesture-based components (Sheet, Slider) may have limited functionality
• Positioning components (Select, Popover, Dropdown) use different measurement APIs
• Hover interactions available for Tooltip
• Some components use polyfills for native APIs

Usage Example

After initialization, add components to your project:

npx @rn-shad/cli add button input card

Then use them in your code:

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardHeader, CardContent } from '@/components/ui/card';

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <Text variant="h3">Login</Text>
      </CardHeader>
      <CardContent>
        <Input placeholder="Email" icon="mail" />
        <Input placeholder="Password" icon="lock" secureTextEntry />
        <Button onPress={() => console.log('Login')}>
          Login
        </Button>
      </CardContent>
    </Card>
  );
}

Configuration

The components.json file configures your project:

{
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "global.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Requirements

• React 18.2+ or React 19+
• React Native 0.70+
• Expo SDK 50+ (if using Expo) or bare React Native

Recommended for best compatibility:

• React Native 0.74+
• Expo SDK 54+

Core Dependencies

The CLI will automatically install:

• react-native-reanimated@^4.0.0 (v4 for New Architecture support)
• react-native-worklets@^0.6.0 (required by Reanimated v4)
• react-native-gesture-handler@^2.14.0
• react-native-svg@^15.0.0
• lucide-react-native@^0.554.0 (or react-native-heroicons@^4.0.0)
• babel-plugin-module-resolver@^5.0.0 (dev dependency)

Troubleshooting

If you encounter issues:

1. Run the doctor command:

   npx rn-shad-cli doctor

2. Clear cache and restart:

   rm -rf node_modules/.cache .expo
   npx expo start --clear

3. Verify module resolver is configured:

   • Check babel.config.js has module-resolver plugin
   • Check tsconfig.json has path aliases (for TypeScript projects)
   • Restart Metro bundler after config changes

License

MIT

Links

• Documentation
• GitHub
• Issues