Rangaat 🎨

Bring color and life to your mobile apps with customizable, Material-Expressive React Native UI components.

Rangaat is a premium, beautifully crafted React Native component library designed around Material Expressive principles. It provides highly customizable components, a robust theming engine, and built-in hooks to create stunning, dynamic user interfaces for iOS, Android, and Web.

Features ✨

• 🎨 Material Expressive Design: Modern, fully rounded pill shapes, vibrant colors, and dynamic interaction states.
• 🌓 Theming Engine: Built-in Light and Dark themes, with full customization via ThemeProvider.
• 🧩 Comprehensive Button Library: Support for 5 variants (filled, tonal, elevated, outlined, text), sizes, icons, and more.
• 🪝 Helpful Hooks: Easily access the active theme and colors anywhere in your app using useTheme.
• 📱 Cross-Platform: Seamlessly works on iOS, Android, and Web.

Installation 📦

npm install rangaat
# or
yarn add rangaat

Quick Start 🚀

To use Rangaat, you need to wrap your application in the ThemeProvider. This injects the theme context into all underlying components.

import React from 'react';
import { View } from 'react-native';
import { ThemeProvider, Button, useTheme } from 'rangaat';

const AppContent = () => {
  const theme = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: theme.colors.background, justifyContent: 'center', alignItems: 'center' }}>
      <Button variant="elevated" size="large">
        Get Started
      </Button>
    </View>
  );
};

export default function App() {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
}

Components 🧱

Button

A highly interactive, expressive button component.

Props:

• variant ('filled' | 'tonal' | 'elevated' | 'outlined' | 'text'): The visual style of the button. Default is filled.
• size ('small' | 'medium' | 'large'): The button size. Default is medium.
• color (string): Override the default theme color for this specific button.
• fullWidth (boolean): If true, the button stretches to fill its container's width.
• disabled (boolean): Disables the button and applies disabled styling.
• iconLeft / iconRight (ReactNode): Add icons to either side of the button text.

ThemeProvider

The context provider for the Rangaat theme.

Props:

• initialTheme (RangaatTheme): Provide your own custom theme object. Defaults to the built-in lightTheme.

Hooks 🪝

useTheme

Returns the current active RangaatTheme object, granting access to colors, typography, spacing, and shapes.

const theme = useTheme();
console.log(theme.colors.primary);

useThemeActions

Returns functions to update the theme dynamically.

const { toggleTheme, setTheme } = useThemeActions();

// Toggle between light and dark mode
<Button onPress={toggleTheme}>Toggle Theme</Button>

Contributing 🤝

We welcome contributions! See our Contributing Guide to get started with the development workflow.

• Code of Conduct

License 📄

MIT