empiric-reactui

Add editable React UI components to your project with a command-line tool. The CLI copies the component source into your app, so you own the files and can change them. It installs the packages the selected components need; your app does not depend on this CLI at runtime.

npx empiric-reactui@latest init
npx empiric-reactui@latest add button

Requirements

• Node.js 18 or newer.
• An existing React app with react and react-dom in its package.json.
• Tailwind CSS v4. The init command sets up the React UI theme and offers to install missing Tailwind dependencies.

Run CLI commands from your app's root directory, where its package.json is located. You do not need to install the CLI globally.

Getting started

1. Set up the project

npx empiric-reactui@latest init

The command creates a components.json configuration and the shared cn utility. It also sets up the React UI theme, installs missing theme packages, and wires the @/* import alias when it can. If it cannot update your Vite configuration automatically, it prints the steps to finish setup.

If your app already has an entry CSS file with content, init asks before replacing it with the theme import. Review that prompt before approving the change.

2. Add components

npx empiric-reactui@latest add button

Add several components in one command:

npx empiric-reactui@latest add button card dialog

The CLI copies the component files into your app, resolves and adds required components, and offers to install any missing npm packages. Some components also offer an optional example page.

To browse the available component names interactively, run add without names in a terminal. To print the names, run:

npx empiric-reactui@latest add --help

You can run add without init; it creates a default configuration and the shared utility when needed. Running init first is recommended to set up the theme.

Commands

| Command | What it does | | --- | --- | | npx empiric-reactui@latest init | Set up the theme, configuration, and shared utility. | | npx empiric-reactui@latest add <name...> | Copy one or more components into the app. | | npx empiric-reactui@latest add | Choose components interactively. | | npx empiric-reactui@latest redux-toolkit | Scaffold a Redux Toolkit store, typed hooks, example slices, and API client. | | npx empiric-reactui@latest completion bash | Print Bash completion setup. | | npx empiric-reactui@latest completion zsh | Print Zsh completion setup. |

redux-toolkit also accepts the shorter alias redux. It can be run without init. It creates the Redux files and tries to wrap your app in a Redux <Provider>. If it cannot safely recognize your entry file, it prints the wiring instructions instead.

Prompts and existing files

The CLI detects npm, pnpm, or Yarn from your app's lockfile and uses that package manager to install dependencies. It asks before installing packages and before including optional example pages.

If a target file already exists and differs from the component version, the CLI shows the conflict and asks before replacing it. Identical files are left unchanged.

• --overwrite replaces files that differ from the registry version.
• -y or --yes automatically approves package installs, optional pages, and file overwrites.

For example:

npx empiric-reactui@latest add button --overwrite
npx empiric-reactui@latest add button card --yes

Use --yes in scripts or other non-interactive environments. It approves overwriting changed files, so use it only when that is what you intend.

Updating copied components

The component files in your app are yours to edit. To replace a changed local file with the current registry version, run add again and use --overwrite when prompted. Review your local changes first; overwriting replaces the file contents.

Help

npx empiric-reactui@latest --help
npx empiric-reactui@latest add --help
npx empiric-reactui@latest redux-toolkit --help

Troubleshooting

• The CLI cannot find package.json: run it from your React app's root directory.
• The folder is not recognized as a React app: check that react and react-dom are listed in that app's package.json.
• A component name is unknown: run npx empiric-reactui@latest add --help to see the names in the version you are using.
• A package install is declined: rerun the command and approve the install prompt, or use --yes if you intend to approve all prompts.

License

This package is released under the MIT license.