🧩 RH Tailwind Global Components

RH Tailwind Global Components is a collection of reusable UI components built with React, TypeScript, and Tailwind CSS, powered by Vite.
The library is designed to help you build modern, consistent interfaces quickly and efficiently.

🚀 Installation

Install via npm or yarn:

# Using npm
npm install rh-tailwind-global

# Or using yarn
yarn add rh-tailwind-global

⚙️ Peer Dependencies

Make sure the following dependencies are installed in your project:

| Package | Version | |----------|----------| | react | ≥ 18 | | react-dom | ≥ 18 | | typescript | ≥ 5.x | | tailwindcss | ≥ 3.x |

🧱 Components

🔘 Button

A flexible and highly customizable Button component that supports multiple styles, colors, sizes, icons, and loading states.

✅ Props

| Prop Name | Type | Default | Description | |------------|------|----------|-------------| | buttonText | string | — | Text displayed inside the button. | | styleType | "contained" | "outline" | "text" | "contained" | Defines the visual style of the button. | | color | "primary" | "secondary" | "error" | "success" | "warning" | "info" | "primary" | Color scheme of the button. | | size | "sm" | "md" | "lg" | "md" | Defines the button size. | | loading | boolean | false | Shows a spinner and disables the button when true. | | disabled | boolean | false | Manually disables the button. Overrides loading. | | startIcon | ReactNode | — | Optional icon displayed before the button text. | | endIcon | ReactNode | — | Optional icon displayed after the button text. | | onClick | () => void | — | Function called when the button is clicked. |

💡 Example Usage

import React from "react";
import CustomButton from "rh-tailwind-global";

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen bg-gray-50">
      <CustomButton
        buttonText="Click Me"
        styleType="contained"
        color="primary"
        size="md"
        onClick={() => alert("Button clicked!")}
      />
    </div>
  );
}

🎨 Customization

All components are styled using Tailwind CSS, making it easy to override or extend styles through your own tailwind.config.js.
This allows seamless integration with your existing design system or brand guidelines.

🧾 License

This project is licensed under the MIT License — feel free to use it in your personal and commercial projects.

🤝 Contributing

Contributions are welcome!

1. Fork the repository.
2. Create a new branch (feature/my-new-component).
3. Commit and push your changes.
4. Open a pull request 🎉

🧠 Author

RH Dev Team
Crafted with ❤️ using React + Tailwind CSS.