BarUI - A CLI for Adding UI Components in React/Next.js Projects

🚀 Easily Generate Pre-Built UI Components with a Simple Command!

📌 Overview

BarUI is a CLI tool designed to help developers quickly integrate pre-built UI components into their React or Next.js projects. Instead of manually creating and styling UI elements, developers can simply run a command like:

npx barui add Modal

This automatically fetches the Modal component from the BarUI component library and adds it to the specified directory in your project.

✨ Features

✅ Component Generation: Quickly add UI components like modals, buttons, carousels, etc.
✅ Configurable Paths: Customize where components are generated using barui.config.mjs or barui.config.mts.
✅ Supports JavaScript & TypeScript: Choose between .jsx or .tsx components.
✅ Tailwind CSS Styling: All components are styled using Tailwind CSS, making them highly customizable and responsive.
✅ Simple Setup: Initialize the CLI with barui init.
✅ Error Handling: Prevents empty folders when components don’t exist.

🛠 How It Works

1️⃣ Install & Initialize

Run the following command in your project:

npx barui init

This will create a barui.config.mjs file where you can specify:

• Component Path (where components should be placed).
• Language (JavaScript or TypeScript).

2️⃣ Add a Component

To add a component (e.g., a Modal):

npx barui add Modal

This will:
✅ Check if the component exists in BarUI’s component library.
✅ Copy the component into your project’s specified directory.
✅ Display a success message.

3️⃣ Configuration (barui.config.mjs)

Example configuration:

export default {
  componentPath: "./src/components/ui", // Where components will be added
  language: "ts", // "mjs" for JSX, "ts" for TypeScript (TSX)
};

🚧 Future Improvements

🔹 Support for more UI components.
🔹 Integration with a cloud-based component registry.
🔹 Theming options for customization.
🔹 More interactive CLI prompts using ClackJS.

🔗 Conclusion

BarUI simplifies component management in React and Next.js projects by automating the process of adding and configuring reusable UI components. All components are built with Tailwind CSS, ensuring a modern, responsive, and customizable design. Save time, write less boilerplate, and focus on building great apps! 🚀