Create a new React Native app with Lunar Kit and NativeWind pre-configured
npm install create-lunar-kitScaffold a new React Native app with Lunar Kit and NativeWind pre-configured - the fastest way to start building beautiful mobile apps.
Create a new Lunar Kit project with a single command:
``bash`
npm create lunar-kit@latestor
pnpm create lunar-kitor
yarn create lunar-kit
A fully configured React Native + Expo project with:
✅ Lunar Kit - Component library pre-installed
✅ NativeWind v4 - Tailwind CSS for React Native
✅ Expo Router - File-based routing
✅ TypeScript - Full type safety (optional)
✅ Dark Mode - Theme system built-in
✅ Best Practices - Organized folder structure
When you run the command, you'll be prompted to configure your project:
`bash`
? Project name: › my-app
? Select a template: ›
❯ Default (Expo Router + NativeWind)
Minimal (Basic setup)
? Use TypeScript? › Yes / No
? Install dependencies? › Yes / No
? Package manager: ›
❯ pnpm
npm
yarn
After scaffolding, your project will look like:
``
my-app/
├── app/ # Expo Router pages
│ ├── _layout.tsx # Root layout
│ ├── index.tsx # Home screen
│ └── (tabs)/ # Tab navigation
├── src/
│ ├── components/ # Shared components
│ │ └── ui/ # Lunar Kit UI components
│ ├── lib/ # Utilities
│ │ └── utils.ts # Helper functions (cn)
│ ├── hooks/ # Custom hooks
│ ├── contexts/ # React contexts
│ └── providers/ # App providers
├── assets/ # Images, fonts, etc.
├── tailwind.config.js # Tailwind configuration
├── nativewind-env.d.ts # NativeWind types
├── app.json # Expo configuration
└── package.json
Full-featured setup with:
- Expo Router with tab navigation
- NativeWind configured
- Theme provider with dark mode
- Example components and screens
- TypeScript ready
Bare-bones setup with:
- Basic Expo Router setup
- NativeWind configured
- Essential utilities only
- Clean slate for custom architecture
1. Project Creation
- Creates project directory
- Copies template files
- Sets up package.json
2. Dependencies Installation (if selected)
- Installs Expo and React Native
- Installs NativeWind and dependencies
- Installs Lunar Kit packages
- Installs development tools
3. Configuration
- Configures TypeScript (if selected)
- Sets up tailwind.config.js
- Configures NativeWind
- Initializes Git repository
4. Post-Setup
- Generates type definitions
- Creates necessary directories
- Copies base components
Once your project is created, navigate to it and start developing:
`bash
cd my-app
Then press:
-
i for iOS simulator
- a for Android emulator
- Scan QR code for Expo Go on your deviceAdding More Components
After setup, use the Lunar Kit CLI to add more components:
`bash
Install the CLI globally (if not already)
pnpm add -g @lunar-kit/cliAdd components to your project
lunar-kit add button card dialogOr add all components
lunar-kit add --all
`Example Usage
After creation, you can start building immediately:
`typescript
// app/index.tsx
import { View } from 'react-native';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Text } from '@/components/ui/text';export default function HomeScreen() {
return (
Welcome to Lunar Kit!
Start building your app with beautiful components
This project is powered by Lunar Kit and NativeWind.
);
}
`CLI Options
Run with options to skip interactive prompts:
`bash
Create with specific options
npm create lunar-kit@latest my-app -- --template default --typescriptAvailable flags:
--template Template to use (default|minimal)
--typescript Use TypeScript
--no-typescript Use JavaScript
--install Install dependencies
--no-install Skip dependency installation
--packageManager Package manager to use (pnpm|npm|yarn)
`$3
`bash
TypeScript project with pnpm
npm create lunar-kit@latest my-app -- --typescript --packageManager pnpmJavaScript project, skip install
npm create lunar-kit@latest my-app -- --no-typescript --no-installMinimal template
npm create lunar-kit@latest my-app -- --template minimal
`Requirements
- Node.js: >= 18.0.0
- Package Manager: npm, pnpm, or yarn
- iOS: Xcode 14.0+ (for iOS development)
- Android: Android Studio with SDK (for Android development)
Features Included
$3
Tailwind CSS utilities work natively:
`typescript
Hello World
`$3
Theme provider included:
`typescript
import { useTheme } from '@/hooks/useTheme';const { theme, toggleTheme } = useTheme();
`$3
Full TypeScript support with proper types:
`typescript
import type { ButtonProps } from '@/components/ui/button';
`$3
Expo Router for intuitive navigation:
`
app/
index.tsx → /
profile.tsx → /profile
settings/
index.tsx → /settings
account.tsx → /settings/account
`Updating
Keep your project up to date:
`bash
Update Lunar Kit packages
pnpm update @lunar-kit/cli @lunar-kit/coreUpdate Expo SDK
npx expo install --fix
`Troubleshooting
$3
`bash
Clear cache and retry
pnpm store prune
pnpm create lunar-kitOr use npx with npm
npx create-lunar-kit@latest
`$3
`bash
Regenerate NativeWind setup
pnpm nativewind:checkClear Metro cache
pnpm start --clear
`$3
`bash
Regenerate types
npx expo customize tsconfig.jsonCheck NativeWind types
cat nativewind-env.d.ts
`Differences from create-expo-app
create-lunar-kit extends Expo with:- ✅ Pre-configured component library
- ✅ NativeWind (Tailwind CSS) setup
- ✅ Theme system with dark mode
- ✅ Better folder structure
- ✅ Utility functions included
- ✅ CLI tool for adding components
Examples & Demos
Check out example apps in the repository.
Support
- Documentation
- Discord Community
- GitHub Issues
- Stack Overflow
What's Next?
After creating your project:
1. Explore Components: Check
src/components/ui/
2. Add More Components: Use lunar-kit add
3. Customize Theme: Edit tailwind.config.js
4. Build Screens: Add files to app/` directory- @lunar-kit/cli - CLI for managing components
- @lunar-kit/core - Core component registry
We welcome contributions! See CONTRIBUTING.md for guidelines.
MIT © Dimas Maulana
---
Made with 🌙 by the Lunar Kit team