devLap

Build Beautiful React UIs with Our New Component Library - UI Component Library

javascript dev.to

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
Enter fullscreen mode Exit fullscreen mode

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: john@example.com</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
Enter fullscreen mode Exit fullscreen mode

Install dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

Start development server 

npm run dev
Enter fullscreen mode Exit fullscreen mode

Build for production 

npm run build
Enter fullscreen mode Exit fullscreen mode

🤝 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

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

Source: dev.to

arrow_back Back to Tutorials