Adus Component Library

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:

1. Install Tailwind CSS:

npm install -D tailwindcss
npx tailwindcss init

2. Configure tailwind.config.js:

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

3. 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:

1. Tailwind CSS Classes:

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

2. Custom CSS:

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

3. 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:

1. Fork the Repository:

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

2. Create a Feature Branch:

   git checkout -b feature/your-feature-name

3. Commit Your Changes:

   git commit -m "Add your feature"

4. Push to Your Fork:

   git push origin feature/your-feature-name

5. 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:

1. Clone the repository:

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

2. Install dependencies:

npm install

3. 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: [email protected]
• Community: Join our Discord server (coming soon)

Built with ❤️ by the Adus Component Team