npm version npm downloads TypeScript React Native License: MIT

A comprehensive React Native UI component library and theme system designed to accelerate your mobile application development. With a focus on customization, performance, and exceptional developer experience.

Seamlessly switch between light and dark modes, or create your own custom themes.

Complete TypeScript support with comprehensive type definitions for a safe development experience.

Easily customize every aspect of components using a flexible theme system.

Built specifically for React Native with optimal performance and perfect native experience.

Automatically saves user theme preferences for consistent experience.

Comes with various built-in theme presets that are ready to use and customizable.

npm install rnc-theme
# or
yarn add rnc-theme

import React from 'react';
import { View } from 'react-native';
import { RNCProvider, Button, Typography } from 'rnc-theme';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const App = () => {
 return (
		<GestureHandlerRootView>
			<RNCProvider>
				<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
					<Typography variant="h1">Welcome!</Typography>
					<Button onPress={() => console.log('Button pressed!')}>
						<Typography color="white">Press Me</Typography>
					</Button>
				</View>
			</RNCProvider>
		</GestureHandlerRootView>
 );
};
export default App;

Customizable buttons with various variants, sizes, and Floating Action Button.

Complete typography system with various heading, body, and caption variants.

Input, Checkbox, Radio, Switcher, Toggle, Slider, and integrated Form Control.

Card, Divider, Layout components, Modal, Bottom Sheet, and Accordion.

Table, Badge, Avatar, Progress, Rating, and Skeleton loading.

Toast notifications, Tooltip, Spinner, and various other interactive components.

Image Carousel, Calendar, Date Picker for displaying multimedia content.

Combobox, Scroll components, and Internationalization (i18n) support.

Visit our comprehensive documentation for detailed guides and examples:

Complete guide to start using rnc-theme in your project.

Learn how to create and customize themes according to your brand.

Explore all available components with complete usage examples.

See real implementation examples and best practices.

We warmly welcome contributions from the community! Please read our comprehensive contribution guidelines:

📋 Contributing Guide - Complete guide for contributing
📜 Code of Conduct - Community rules and ethics
🔒 Security Policy - Security policy and vulnerability reporting
🗺️ Roadmap - Future development plans
👥 Authors - List of contributors and maintainers
📝 Changelog - Version change history

1. Fork this repository
2. Clone your fork: git clone https://github.com/YOUR_USERNAME/react-native-components.git
3. Install dependencies: bun install
4. Create feature branch: git checkout -b feature/amazing-feature
5. Make your changes and test thoroughly
6. Commit with conventional format: git commit -m "feat: add amazing feature"
7. Push to branch: git push origin feature/amazing-feature
8. Create Pull Request using the provided template

• 🐛 Report Bugs: Use bug report template
• ✨ Request Features: Use feature request template
• 💻 Code Contributions: Follow development guidelines
• 📚 Improve Documentation: Any documentation improvements are highly appreciated
• 🎨 Design & UX: Help improve design system and user experience
• 🧪 Testing: Help test new features and bug fixes
• 🌍 Translation: Help translate documentation to other languages

MIT - See LICENSE for details

Made with ❤️ for the React Native community