cl-ui-components

✨ A modern, reusable React UI component library built with Emotion and Babel. Designed for fast, scalable development.

📦 Installation

npm install cl-ui-components
 ### Usage
import { Button } from 'cl-ui-components';

export default function App() {
  return (
    <div>
      <Button onClick={() => alert('Clicked!')}>Click Me</Button>
    </div>
  );
}
All components are fully styled, accessible, and ready for production.

 # Available Components
Button

Input

Card

(More coming soon...)

You can preview all components locally via the built-in preview app (see below).

# Local Development
If you want to develop or contribute:

# Clone the repo
# git clone https://github.com/your-username/uicomponents.git
# cd uicomponents

# Install dependencies

npm install

Start the Preview App

npm run preview
Open http://localhost:5173 to view it in the browser.

# 🖼 Preview Application (Storybook-style)
Built-in local preview app for faster development.

Sidebar navigation for switching between components.

Auto-generated routes for easier scalability.

Tip: Simply add a new preview component and update the config.js to make it appear in the sidebar instantly!

# 📁 Project Structure

uicomponents/
├── dist/              # Compiled library output
├── src/               # Component source code
│   └── components/
├── preview/           # Preview app (Storybook-like)
│   ├── App.jsx
│   ├── config.js
│   └── components/
├── package.json
├── rollup.config.js   # Rollup bundler config
└── README.md
📄 License
This project is licensed under the MIT License.
Feel free to use it for personal or commercial projects.

🙌 Contributing
We welcome contributions!
Please feel free to submit issues, suggestions, or pull requests.

📢 Notes
Built with React, Emotion (CSS-in-JS), Babel, Rollup, and Vite for previewing.

No TypeScript is required (but you can add .d.ts if needed for better DX).

Small, tree-shakeable, and framework-agnostic.

🚀 Let's Build Better UIs, Faster!