Lunar Kit LogoLunar Kit

Introduction

Welcome to Lunar Kit 🌙 — a comprehensive UI component library for React Native applications, built with NativeWind (Tailwind CSS for React Native).

What is Lunar Kit?

Lunar Kit is a collection of beautifully designed, accessible, and customizable UI components for React Native. It provides everything you need to build modern mobile applications with a consistent design system.

Key Features

  • 🎨 Beautiful Design — Clean, modern components following best practices
  • 🌙 Dark Mode Support — Built-in theme switching capabilities
  • 📱 Cross Platform — Works on iOS, Android, and Web
  • ⚡ NativeWind Powered — Leverage Tailwind CSS utility classes
  • 🔧 Customizable — Easy to extend and modify
  • 📦 Copy-Paste Ready — Components are added directly to your project
  • 🎯 TypeScript First — Full type safety throughout
  • ♿ Accessible — WCAG compliant components

Why Lunar Kit?

Unlike traditional component libraries that are installed as npm packages, Lunar Kit follows the copy-paste approach (inspired by shadcn/ui). This means:

  1. Full Control — Components live in your project, so you can modify them freely
  2. No Lock-in — You're not dependent on library updates or breaking changes
  3. Learn & Understand — See exactly how each component is built
  4. Customize Everything — Change styles, behavior, or structure as needed

Philosophy

Lunar Kit is built with these principles in mind:

Composition Over Configuration

Components are designed to be composed together rather than configured through props. This gives you more flexibility and makes the code more readable.

// ✅ Composition approach
<Card>
<CardHeader>
  <CardTitle>Welcome</CardTitle>
  <CardDescription>Get started with Lunar Kit</CardDescription>
</CardHeader>
<CardContent>
  <Text>Your content here</Text>
</CardContent>
</Card>

Variants with CVA

We use class-variance-authority (CVA) for handling component variants. This provides type-safe variant management with excellent developer experience.

// Button variants example
<Button variant="default">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

NativeWind Integration

All styling is done through NativeWind, making it easy to customize using familiar Tailwind CSS classes.

<Button className="mt-4 w-full">
Full Width Button
</Button>

Components

Lunar Kit includes a comprehensive set of components:

Form Components

  • Button — Versatile button with multiple variants
  • Input — Text input with prefix/suffix support
  • Textarea — Multi-line text input
  • Checkbox — Checkbox with label support
  • Radio — Radio button components
  • Select — Dropdown select component
  • Form — Form wrapper with validation

Layout Components

  • Card — Container with header, content, footer
  • Dialog — Modal dialog with overlay
  • Bottom Sheet — Sliding bottom panel
  • Banner — Alert/notification banner

Display Components

  • Text — Styled text with variants
  • Avatar — User avatar with fallback
  • Badge — Label/tag component

Data Components

  • Tabs — Tab navigation component

Advanced

Quick Start

Get started with Lunar Kit in just a few minutes:

# Create a new project with Lunar Kit
pnpm create lunar-kit my-app
cd my-app
 
# Or add to existing project
pnpm add -g @lunar-kit/cli
lunar init
lunar add button card

Requirements

  • React Native >= 0.70.0
  • Expo SDK 49+ (recommended)
  • NativeWind >= 4.0.0
  • Node.js >= 18.0.0

Community

Ready to get started? Head over to the Installation guide!

Next

CLI

On this page