react-native-bee-kitten

🐝 Bee Kitten UI

A comprehensive React Native UI component library built with TypeScript and a powerful theme system. Features 14+ production-ready components with full customization support and dark mode.

✨ Features

• 🎨 Complete Design System - Foundation tokens, semantic tokens, and component-specific tokens
• 🌗 Dark Mode - Built-in light and dark theme modes with seamless switching
• 🎯 Highly Customizable - Override any theme value without modifying library code
• 🚀 TypeScript First - Full type safety with excellent IDE autocomplete
• 📦 Minimal Dependencies - Only React Native as peer dependency
• 🎭 Theme-Driven Styling - All styles derived from unified theme system
• ⚡️ Performance - Optimized rendering with memoization and smart style calculation
• 🧩 14+ Components - Button, Input, Card, Text, Badge, Avatar, Checkbox, Radio, Chip, Tab, Menu, Skeleton, Textarea, Icon

📦 Installation

npm install react-native-bee-kitten
# or
yarn add react-native-bee-kitten

🚀 Quick Start

1. Setup ThemeProvider

import { ThemeProvider } from 'react-native-bee-kitten';

export default function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}

2. Use Components

import { Button, Input, Card, Text } from 'react-native-bee-kitten';
import { View } from 'react-native';

export default function LoginScreen() {
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Text variant="h2">Welcome Back</Text>
        
        <Input
          label="Email"
          placeholder="Enter your email"
          style={{ marginTop: 16 }}
        />
        
        <Input
          label="Password"
          placeholder="Enter your password"
          secureTextEntry
          style={{ marginTop: 12 }}
        />
        
        <Button
          variant="solid"
          size="lg"
          fullWidth
          style={{ marginTop: 24 }}
          onPress={() => console.log('Login pressed')}
        >
          Sign In
        </Button>
      </Card>
    </View>
  );
}

🧩 Components

• Button - Multiple variants (solid, outline, ghost, link) and sizes
• Input - Text input with label, helper text, and error states
• Card - Container with shadow and border options
• Text - Typography with semantic variants (h1-h4, body, caption, label)
• Checkbox - Selectable toggle with label
• Radio - Radio button with RadioGroup wrapper
• Chip - Compact component for tags or filters
• Tab - Tabbed navigation interface
• Badge - Status/count indicator
• Avatar - Profile image display
• Skeleton - Loading placeholder
• Menu - Dropdown menu with actions
• Textarea - Multi-line text input
• Icon - Icon component with Lucide icon integration

🎨 Theme System

3-Layer Architecture

Foundation Tokens (spacing, radius, colors, typography)
            ↓
Semantic Tokens (theme-aware colors: background, content, primary)
            ↓
Component Tokens (component-specific configurations)

Basic Theme Override

import { ThemeProvider, createTheme } from 'react-native-bee-kitten';

const customTheme = createTheme({
  colors: {
    colorPrimary: '#FF7849',
    colorSecondary: '#6B4CE6',
  },
});

export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

Dark Mode

import { createTheme, ThemeProvider } from 'react-native-bee-kitten';
import { useState } from 'react';

export default function App() {
  const [isDark, setIsDark] = useState(false);
  
  const theme = createTheme({ mode: isDark ? 'dark' : 'light' });
  
  return (
    <ThemeProvider theme={theme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

Access Theme in Components

import { useTheme } from 'react-native-bee-kitten';
import { View, Text } from 'react-native';

function CustomComponent() {
  const theme = useTheme();
  
  return (
    <View style={{
      backgroundColor: theme.colors.colorBackground,
      padding: theme.tokens.spacing.x4,
      borderRadius: theme.tokens.radius.x2,
    }}>
      <Text style={{ color: theme.colors.colorContent }}>
        Themed Text
      </Text>
    </View>
  );
}

📚 Documentation

For detailed component APIs, theme configuration, and advanced usage, see DOCUMENTATION.md.

🌟 Example App

A fully functional example app demonstrating all components and features:

cd example
yarn install
yarn ios    # Run on iOS
yarn android # Run on Android

📖 API Reference

createTheme(override?: ThemeOverride): Theme

Creates a theme object by merging overrides with defaults.

useTheme(): Theme

Hook to access the current theme in any component.

ThemeProvider

Context provider that makes theme available to all child components.

Props:

• theme? - Custom theme created with createTheme
• children - React components

🛠 Development

Setup

git clone https://github.com/brightkieu/react-native-bee-kitten.git
cd bee-kitten
yarn install

Build

yarn prepare # Builds lib directory

Type Check

yarn typecheck

Lint

yarn lint

Test

yarn test

📜 License

MIT

🤝 Contributing

Contributions are welcome! Please read:

• Contributing Guide
• Code of Conduct

Built with ❤️ by the BrightTeam
GitHub • npm