https://github.com/ahmedbna/ui
BNA UI - Expo, React Native components library
https://github.com/ahmedbna/ui
expo react-native
Last synced: 6 months ago
JSON representation
BNA UI - Expo, React Native components library
- Host: GitHub
- URL: https://github.com/ahmedbna/ui
- Owner: ahmedbna
- License: mit
- Created: 2025-07-04T20:37:11.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-07-14T16:07:34.000Z (6 months ago)
- Last Synced: 2025-07-14T18:26:05.763Z (6 months ago)
- Topics: expo, react-native
- Language: TypeScript
- Homepage: https://ui.ahmedbna.com
- Size: 1.26 MB
- Stars: 165
- Watchers: 2
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BNA UI 🚀
**B**uild **N**ative **A**pps - A powerful CLI for creating Expo React Native applications with a beautiful UI component library.
## ✨ Features
- 🎨 **Beautiful UI Components** - Pre-built, customizable components with modern design
- 🌙 **Theme Support** - Built-in light/dark mode with seamless transitions
- 📱 **Expo Router Ready** - Complete navigation setup with tab and stack navigation
- 🎯 **TypeScript First** - Full TypeScript support with excellent IntelliSense
- 📦 **Flexible Package Manager** - Works with npm, yarn, or pnpm
- 🚀 **Zero Configuration** - Get started in seconds with sensible defaults
- 🔧 **Highly Customizable** - Easily customize colors, spacing, and components
- 📲 **Cross-Platform** - Perfect compatibility across iOS and Android
- ⚡ **Performance Optimized** - Lightweight and fast components
- 🎭 **Animation Ready** - Smooth animations with React Native Reanimated
## 📦 Installation
```bash
# The fastest way to set up BNA UI in your Expo project:
npx bna-ui init
# Navigate to your Expo project
cd bna-app
# Start adding components
npx bna-ui add button
npx bna-ui add card
npx bna-ui add input
```
## 🎯 Usage Example
```tsx
import React from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { View } from '@/components/ui/view';
export default function HomeScreen() {
return (
console.log('Button pressed!')}
>
Get Started
);
}
```
## 🌙 Theme Configuration
BNA UI comes with a flexible theming system:
```tsx
// theme/colors.ts
export const lightTheme = {
colors: {
background: '#FFFFFF',
foreground: '#000000',
card: '#F2F2F7',
cardForeground: '#000000',
popover: '#F2F2F7',
popoverForeground: '#000000',
primary: '#18181b',
primaryForeground: '#FFFFFF',
secondary: '#F2F2F7',
secondaryForeground: '#18181b',
muted: '#78788033',
mutedForeground: '#71717a',
// ... more colors
},
};
export const darkTheme = {
colors: {
background: '#000000',
foreground: '#FFFFFF',
card: '#1C1C1E',
cardForeground: '#FFFFFF',
popover: '#18181b',
popoverForeground: '#FFFFFF',
primary: '#e4e4e7',
primaryForeground: '#18181b',
secondary: '#1C1C1E',
secondaryForeground: '#FFFFFF',
muted: '#78788033',
mutedForeground: '#a1a1aa',
// ... more colors
},
};
```
## 📱 Platform Support
- ✅ **iOS** - Full native iOS support
- ✅ **Android** - Full native Android support
- ✅ **Web** - Responsive web support
- ✅ **Expo Go** - Development with Expo Go
- ✅ **EAS Build** - Production builds with EAS
## 🛠️ Development
```bash
# Clone the repository
git clone https://github.com/ahmedbna/bna-ui.git
cd bna-ui
# Install dependencies
npm install
# Build for production
npm run build
```
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🔗 Links
- 📚 **Documentation**: [https://ui.ahmedbna.com](https://ui.ahmedbna.com)
- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/ahmedbna/ui/issues)
- 💬 **Linkedin**: [@ahmedbna](https://www.linkedin.com/in/ahmedbna/)
- 𝕏 **X**: [@ahmedbnaa](https://x.com/ahmedbnaa)
## ⭐ Support
If you find BNA UI helpful, please consider giving it a star on GitHub! It helps us a lot.
[](https://github.com/ahmedbna/ui)
## 📈 Stats
---
Made with ❤️ by [Ahmed BNA](https://github.com/ahmedbna)