adus-component

Adus Component Library

**Beautiful, reusable, and accessible React components for modern web applications.**

Welcome to the Adus Component Library! This library provides a collection of customizable, performant, and accessible UI components built with React and styled with Tailwind CSS. Whether you're building a dashboard, e-commerce platform, or a personal project, Adus components are designed to help you create stunning user interfaces with minimal effort.

Features

• Accessible: Built with ARIA standards to ensure inclusivity.
• Customizable: Easily style components using Tailwind CSS or custom CSS.
• TypeScript Support: Fully typed for a seamless developer experience.
• Lightweight: Optimized for performance with minimal dependencies.
• Responsive: Components adapt to all screen sizes out of the box.
• Dark Mode: Built-in support for light and dark themes.

Installation

Get started with Adus Component Library in just a few steps.

Prerequisites

• Node.js (>= 14.x)
• React (>= 16.8)
• Tailwind CSS (optional, for default styling)

Install via npm

npm install adus-component

Install via Yarn

yarn add adus-component

Usage

To use Adus components in your React project, import the desired component and start building!

Example: Using the Button Component

import { Button } from 'adus-component';

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

export default App;

Adding Tailwind CSS (Optional)

If you want to leverage Tailwind CSS for custom styling, add it to your project:

• Install Tailwind CSS:

npm install -D tailwindcss
npx tailwindcss init

• Configure tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/adus-component/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• Include Tailwind in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Available Components

The Adus Component Library includes a growing set of components. Below is a list of some key components:

Component	Description	Props
Button	A versatile button with variants (primary, secondary, etc.)	variant, size, disabled, onClick
Input	A customizable input field with validation support	type, placeholder, value, onChange
Modal	A flexible modal for dialogs and popups	isOpen, onClose, title, children
Card	A styled card for content display	title, children, className
Alert	A notification component for success, error, or info messages	type, message, dismissible

Check the official documentation (coming soon) for a full list of components and their props.

Customization

Adus components are designed to be highly customizable. You can override default styles using:

• Tailwind CSS Classes:

<Button className="bg-red-500 hover:bg-red-700">Custom Button</Button>

• Custom CSS:

.adus-button {
  background-color: #ff4500;
  border-radius: 8px;
}

• Theme Provider (Coming Soon):

Stay tuned for a ThemeProvider to globally customize colors, typography, and more.

Contributing

We welcome contributions from the community! To contribute to the Adus Component Library, follow these steps:

• Fork the Repository:

  git clone https://github.com/adnanhjoy/adus-component.git
  

• Create a Feature Branch:

  git checkout -b feature/your-feature-name
  

• Commit Your Changes:

  git commit -m "Add your feature"
  

• Push to Your Fork:

  git push origin feature/your-feature-name
  

• Open a Pull Request: Go to the repository on GitHub and create a pull request.

Please read our Contributing Guidelines and Code of Conduct before submitting.

Development Setup

To set up the project locally for development:

• Clone the repository:

git clone https://github.com/adnanhjoy/adus-component.git
cd adus-component

• Install dependencies:

npm install

• Build the library:

npm run build

License

This project is licensed under the MIT License.

Support

Have questions or need help? Reach out to us:

• GitHub Issues: File an issue
• Email: [e-mail]
• Community: Join our Discord server (coming soon)

Built with ❤️ by the Adus Component Team