A lightweight, modern React UI component library with 6 beautiful pre-built components. Perfect for fast UI development.
( https://github.com/jwafaDev/UI-Component-Library\)

I Built a React Component Library So You Don't Have To ...

Hey developers! 👋

If you're tired of building the same UI components over and over again, I've got good news for you. I just released UI Component Library - a beautiful, lightweight React component library that'll save you hours of development time.

🤔 Why Another Component Library?Look, I get it.

There are tons of component libraries out there. But most of them are:

• Too heavy with unnecessary dependencies
• Overly complex to customize
• Difficult to integrate quickly
• Poorly documented

That's why I built something different. Something simple, beautiful, and actually useful for everyday projects.

✨ What's Inside?

Our library comes with 6 essential components that cover 80% of your UI needs:

1. Button

jsx
<Button variant=\"primary\">Click Me</Button>
<Button variant=\"secondary\">Secondary</Button>
<Button variant=\"danger\"size=\"lg\">Delete</Button>

Customizable button with multiple variants (primary, secondary, danger) and sizes (sm, md, lg).

2. Card

jsx
<Card>
<Card.Header>Card Title</Card.Header>
<Card.Body>
<p>Your content here</p>
</Card.Body>
<Card.Footer>Footer content</Card.Footer>
</Card>

Perfect for organizing content with header, body, and footer sections.

3. Badge

jsx
<Badge variant=\"success\">Success</Badge>
<Badge variant=\"warning\">Warning</Badge>
<Badge variant=\"error\">Error</Badge>

Small labels for status indicators and quick highlights.

4. Input

jsx
<Input placeholder=\"Enter your name\" />
<Input type=\"email\" placeholder=\"Email\" error />
<Input size=\"lg\" disabled />

Accessible text inputs with error states and multiple sizes.

5. Modal

jsx
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title=\"Welcome!\">
<p>Your content here</p>
</Modal>
</>
);

Easy-to-use modal dialogs for user interactions.

6. 📋 Dropdown

jsx
const [value, setValue] = useState('');
<Dropdown
value={value}
onChange={setValue}
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>

Accessible select menu with smooth animations.

Quick Start

Installation

bash

npm install @jwafadev/ui-components

Usage

jsx
import React from 'react';
import { Button, Card, Badge } from '@jwafadev/ui-components';
function App() {
return (
<div>
<Card>
<Card.Header>Welcome</Card.Header>
<Card.Body>
<Badge variant=\"success\">New Component Library</Badge>
<p>Build beautiful UIs faster!</p>
</Card.Body>
</Card>
<Button variant=\"primary\">Get Started</Button>
</div>
);
}
export default App;

That's it! You're ready to go.

Key Features

• Lightweight - Minimal dependencies, maximum performance
• Customizable - CSS Modules make styling a breeze
• Accessible - Built with accessibility best practices
• Responsive - Works perfectly on all devices
• Easy to Use - Simple API, great documentation
• Modern Design - Beautiful out of the box

🎨 Beautiful Styling

Each component comes with:

• Modern color palette (blues, reds, greens)
• Smooth transitions and hover effects
• Proper spacing and typography
• Dark mode ready CSS

All styling is done with CSS Modules, so you can easily override and customize!

Real-World Example

Here's a quick example of building a user profile card:

jsx
import React, { useState } from 'react';
import { Card, Button, Badge, Modal } from '@jwafadev/ui-components';
function UserProfile() {
const [showDetails, setShowDetails] = useState(false);
return (
<Card>
<Card.Header>
<h2>John Doe</h2>
<Badge variant=\"success\">Active</Badge>
</Card.Header>
<Card.Body>
<p>Full Stack Developer | React Enthusiast</p>
<p>📍 San Francisco, CA</p>
</Card.Body>
<Card.Footer>
<Button
variant=\"primary\"
onClick={() => setShowDetails(true)}>
View Details
</Button>
</Card.Footer>
<Modal
isOpen={showDetails}
onClose={() => setShowDetails(false)} title=\"User Details\">
<p>Email: [email protected]</p>
<p>Joined: Jan 2024</p>
</Modal>
</Card>
);
}
export default UserProfile;

See how easy it is? You can build a complete user interface in minutes!

🛠️ Development

Want to contribute or customize? It's super easy:

bash

# Clone the repo
git clone https://github.com/jwafaDev/UI-Component-Library.git
cd UI-Component-Library

Install dependencies

npm install

Start development server

npm run dev

Build for production

npm run build

🤝 Contributing

Love the library? Want to improve it? Contributions are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Performance

Our components are optimized for performance:

• Minimal re-renders
• Efficient CSS with CSS Modules
• Tree-shakeable exports
• Only 2 peer dependencies (React & React DOM)

What's Next?

The library is production-ready, but we're always adding more:

• [ ] Form validation utilities
• [ ] Theme customization system
• [ ] Dark mode support
• [ ] Animation library integration
• [ ] TypeScript definitions
• [ ] Storybook integration

🔗 Links

• GitHub: https://github.com/jwafaDev/UI-Component-Library
• NPM Package: https://www.npmjs.com/package/@jwafadev/ui-components (coming soon)
• Issues & Feedback: https://github.com/jwafaDev/UI-Component-Library/issues

Final Thoughts

UI development doesn't have to be complicated. With UI Component Library, you can focus on what matters - building great applications, not reinventing the wheel.

If you find this library helpful, please:

1. ⭐ Star the repository on GitHub
2. 📣 Share it with your developer friends
3. 💬 Leave feedback in the issues
4. 🤝 Contribute if you have ideas

Questions?

Feel free to:

• Open an issue on GitHub
• Drop a comment below

Happy coding!

Made with ❤️ by jwafaDev

P.S. If you're building something cool with this library, I'd love to see it! Share your projects in the comments below. 👇