RCU – React Component Utility

RCU is a CLI-based component installer for React and Next.js projects. It allows developers to quickly add prebuilt UI components directly into their projects with a single command.

The goal of RCU is similar to modern component CLIs: instead of installing a UI library package, it copies real component code into your project, so you can freely modify and customize it.

RCU components are built with:

• Tailwind CSS
• GSAP animations
• React / Next.js

Features

• CLI-based component installation
• Automatic project detection
• Supports React and Next.js
• Supports JavaScript and TypeScript
• Dynamic component registry
• Component dependency system
• Automatic npm dependency installation
• Overwrite protection

Supported Project Types

RCU automatically detects the project type and installs the correct component version.

| Framework | Language | Installed Variant | | --------- | ---------- | ----------------- | | React | JavaScript | react-js | | React | TypeScript | react-ts | | Next.js | JavaScript | next-js | | Next.js | TypeScript | next-ts |

Installation

Install RCU globally:

npm install -g rcu

Or use locally via:

npm link

CLI Commands

Initialize Project

Creates the required structure for components.

rcu init

List Available Components

Shows all components available in the registry.

rcu list

Example output:

Available components:

button
modal
accordion

Add Component

Install a component into your project.

rcu add button

This will copy the component into:

components/ui/button.tsx

Interactive Component Selection

If no component is specified:

rcu add

RCU will open an interactive selector.

Component Structure

All components are stored in the registry directory.

Example structure:

registry
 └ button
     ├ component.json
     ├ react-js
     │   └ button.jsx
     ├ react-ts
     │   └ button.tsx
     ├ next-js
     │   └ button.jsx
     └ next-ts
         └ button.tsx

Each variant corresponds to a specific framework and language combination.

Component Configuration

Each component contains a component.json file.

Example:

{
  "name": "modal",
  "dependencies": ["gsap"],
  "components": ["button"]
}

Fields:

name

Component name.

dependencies

NPM packages required by the component.

Example:

gsap

These dependencies are installed automatically.

components

Other components required.

Example:

modal → depends on → button

When installing modal, RCU will install button first.

Example Installation Flow

Command:

rcu add modal

Process:

1. Detect project framework
2. Detect language (JS / TS)
3. Install component dependencies
4. Copy component files
5. Install required npm packages

Example result:

✔ button installed (react-ts)
✔ modal installed (react-ts)
Installing dependencies: gsap

Generated Folder Structure

After installation:

components
 └ ui
     ├ button.tsx
     └ modal.tsx

These are real editable components, not locked library code.

Philosophy

RCU follows the same philosophy as modern UI component tools:

• Components are copied into your project
• Developers own the code
• Full customization is possible

No vendor lock-in.

Development

To develop the CLI locally:

npm install
npm run build
npm link

Now the CLI command will be available globally.

Contributing

Contributions are welcome.

You can contribute by:

• Adding new components
• Improving animations
• Optimizing CLI features
• Fixing bugs

License

MIT License