@cchiragjain/clear.ui/README.md

React UI Components Library

# @cchiragjain/clear.ui

A modern and lightweight React UI component library built with **TypeScript** and **Tailwind CSS**, designed to accelerate your development workflow.

### 🌟 Features

- **Typed for safety**: Built with TypeScript for a seamless developer experience.
- **Stylish and customizable**: Powered by Tailwind CSS for effortless styling and customization.
- **Ready-to-use**: A variety of pre-built components to kickstart your project.
- **Accessible by design**: Built with accessibility (aria) in mind to ensure inclusivity.
- **Storybook Integration**: Explore live examples and documentation for each component.

---

## 🚀 Installation

Install the library via npm:

```bash
npm install @cchiragjain/clear.ui
```

- Update tailwind.config.js file.

```javascript
import { myTailwindContent } from "@cchiragjain/clear.ui";
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", myTailwindContent()],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

---

## 📖 Documentation & Live Preview

Explore the full documentation and live component previews at: [**clear.ui.chiragjain.online**](https://clear.ui.chiragjain.online)

---

## 🧩 Available Components

The library includes the following components:

- **Accordion**: Expandable content panels.
- **Button**: Fully customizable buttons with different variants.
- **Checkbox**: Styled checkboxes for forms.
- **Dialog**: Accessible modal dialogs.
- **DatePicker**: Pick date from a calendar.
- **DateRangePicker**: Pick date ranges from a calendar view.
- **FormField**: Wrapper for handling form fields.
- **HoverCard**: Information on hover.
- **Input**: Text inputs with built-in validation.
- **Label**: Styled labels for inputs.
- **LoadingSpinner**: Minimalist spinner for loading states.
- **MultiSelect**: Select multiple options from a dropdown.
- **RadioGroup**: Grouped radio buttons.
- **RangeSlider**: Sliders for selecting ranges.
- **Select**: Dropdown menus with easy customization.
- **Sidebar**: Collapsible and extendable side navigation.
- **Skeleton**: Placeholder for loading states.
- **Tabs**: Tab-based navigation and content display.
- **TextArea**: Multiline text inputs.
- **Toast**: Notifications and alerts.

---

## 🛠️ Usage

Here's an example of how to use the library:

```tsx
import { Button } from "@cchiragjain/clear.ui";

const App = () => (
  <div>
    <Button variant="primary">Click Me</Button>
  </div>
);
export default App;
```

Refer to the [storybook documentation](https://clear.ui.chiragjain.online) for detailed examples of each component.

---

## 🔧 Pending Issues & Future Improvements

- **Dark Mode Support**: Currently, the library does not support dark mode. Adding dark mode is a high-priority enhancement for future releases.
- **More Components**: Expanding the library with additional components like a Tooltip, or Loading Bar.
- **Theming Support**: Allowing global customization of default styles (e.g., colors, fonts) through a theme provider.
- **Setup Proper Build Pipeline**: Currently I created the NPM package by manually copying the files to a separate folder. This could be changed to a single command and a single repo.

Feel free to suggest more improvements by opening an issue or pull request on GitHub.

---

## 🧑‍💻 Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request on GitHub.

---

## 📦 License

This library is licensed under the MIT License.

---

### 👤 Author

**Chirag Jain**  
[GitHub](https://github.com/cchiragjain) | [LinkedIn](https://linkedin.com/in/cchiragjain)

---

Happy coding! 🎉