@overclock/fuse-ui

FUSE UI is a Vue 3 + TypeScript component registry. The CLI copies component source into your project; it is not a runtime UI dependency.

Copied components and composed sections live in ui/. Design tokens and CSS live in assets/css/. Each project can edit its own source independently. Existing files are preserved unless you explicitly pass --overwrite; use diff before applying upstream changes.

Requirements

• Node.js >= 18
• A Vue 3 project using Tailwind v4 and TypeScript

Quick start

# 1. Set up the project (design tokens in globals.css + cn() helper)
npx @overclock/fuse-ui init

# 2. Add the components you need
npx @overclock/fuse-ui add button input dialog

You can also install it globally:

npm i -g @overclock/fuse-ui
fuse-ui add button

Commands

| Command | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------ | | init | Set up the project: design tokens (globals.css) and cn(). | | add <components...> | Copy one or more components from the registry into your project (dependencies resolved automatically). | | list | List every item available in the registry. | | diff [components...] | Show how your local components differ from the registry. |

Shared options

| Option | Description | | ----------------- | ------------------------------------------------------------------------------------------------- | | -d, --dir <dir> | Directory to copy files into. Defaults to resources/js, src, app, or the current directory. | | --no-install | Skip installing npm dependencies. | | --overwrite | Overwrite files that already exist. |

Examples

# List everything available
npx @overclock/fuse-ui list

# Add a few components
npx @overclock/fuse-ui add card badge avatar

# Add into a custom directory, without auto-installing deps
npx @overclock/fuse-ui add table --dir resources/js --no-install

# See what changed between your copy and the registry
npx @overclock/fuse-ui diff button

How it works

The CLI ships with the registry bundled. add resolves a component's registryDependencies (other components, utils, theme) and npm dependencies, copies the source files into your project, and installs the missing npm packages with your detected package manager.

Because you own the copied source, upgrades are opt-in: run diff to see what changed upstream, then re-add with --overwrite when you want to pull it in.

License

MIT