BNA UI 🚀

!BNA UI Header

Build Native Apps - 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 (



variant='success'
onPress={() => 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',
// ... more colors
},
};

export const darkTheme = {
colors: {
background: '#000000',
foreground: '#FFFFFF',
card: '#1C1C1E',
// ... 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 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 file for details.

🔗 Links

- 📚 Documentation: https://ui.ahmedbna.com
- 🐛 Bug Reports: GitHub Issues
- 💬 Linkedin: @ahmedbna
- 𝕏 : @ahmedbnaa

⭐ Support

If you find BNA UI helpful, please consider giving it a star on GitHub! It helps us a lot.


📈 Stats

!GitHub package.json version
!npm
!npm
!GitHub

---

Made with ❤️ by Ahmed BNA