@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:

npm install @cchiragjain/clear.ui

• Update tailwind.config.js file.

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

🧩 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:

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

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

Refer to the storybook documentation 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 | LinkedIn

Happy coding! 🎉