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. 👇