Hzy UI 🚀

Elevate your React projects with sleek, responsive components crafted with the power of Tailwind CSS.

🚀 Introduction

Hzy UI is a library of ready-to-use, accessible, reusable, and composable React UI components built with the Tailwind CSS framework. It aims to simplify the development of modern web applications by providing a set of high-quality, customizable components that adhere to the latest web standards. This lib provides ready-to-use, accessible, reusable, and composable

Note: This project is currently under active development. Features and APIs are subject to change. Contributions and feedback are welcome!

📦 Installation

To get started with Hzy UI, you can install it using either yarn or npm:

# with yarn
$ yarn add @hattaalfaritzy/hzy-ui

# with npm
$ npm i @hattaalfaritzy/hzy-ui

🚀 Usage

To start using the components, on your application entry point, import the CSS file.

// Do this at the root of your application
import "@hattaalfaritzy/hzy-ui/dist/index.css";

Start using the components in your application Here's a quick example to get you started:

import { Button } from "@hattaalfaritzy/hzy-ui";

const App = () => {
  const handleClick = () => alert("Button Clicked!");

  return (
    <div className="flex justify-center items-center h-screen bg-gray-100">
      <Button
        align="center"
        className="w-full"
        label="Click Me"
        size="md"
        variant="informative"
        onClick={handleClick}
      />
    </div>
  );
};

export default App;

📚 Components

Explore our comprehensive set of components that are designed to be flexible and easy to use.

Button: Highly customizable buttons with multiple variants and sizes.
Input: Text inputs, checkboxes, radio buttons, and more.
Modal: Beautiful and accessible modals for dialogs and popups.
Dropdown: Feature-rich dropdown menus with support for custom items.
...and many more!

For detailed usage and examples, check out the full documentation.

🎨 Customization

Hzy-UI is built with Tailwind CSS, making it incredibly easy to customize components to match your design system. You can override default styles or extend them using Tailwind's utility classes.

📝 License

This project is licensed under the MIT License. See the LICENSE file for more details.

hattaalfaritzy / hzy-ui

readme