Distribution
CLI
fancy-ui CLI reference — init, add, list, search.
The fancy-cli CLI is the vendor path — it fetches component source from the hosted registry and writes the files into your project so you own the code.
Available now — published as
fancy-cli. Run it withnpx fancy-cli …; the installed binary is namedfancy-cli(it uses the namefancy-clibecause the barefancy-uiname is blocked on npm). Source: Particle-Academy/fancy-ui-cli.
Installation
The CLI is meant to be run with npx — no global install required, and the @latest tag is your friend so you always get the registry-compatible version.
# Always run via npx — never npm install -g.
npx fancy-cli@latest init
You can pin a specific version if you need reproducibility:
npx [email protected] init
init
Configures your project for the vendor flow. Run it once per project.
npx fancy-cli@latest init
Walks you through:
- Where component source should live (default:
src/components/fancy/) - The import alias for that directory (default:
@/components/fancy) - Your CSS file (Tailwind v4 location)
- Whether to install peer deps automatically (default: yes —
clsx,tailwind-merge,lucide-reactas needed)
Writes a fancy.json at the project root capturing these choices. Subsequent add commands read it.
{
"$schema": "https://ui.particle.academy/schema/fancy.json",
"registry": "https://ui.particle.academy",
"aliases": {
"components": "@/components/fancy",
"utils": "@/lib/utils"
},
"rsc": false,
"tsx": true,
"tailwind": {
"css": "src/index.css"
}
}
add <name…>
Fetches one or more components from the registry and writes them to disk.
npx fancy-cli@latest add card
npx fancy-cli@latest add card button tabs dropdown
For each component:
- Hit
https://ui.particle.academy/r/{name}.jsonand download the registry-item bundle. - Write each
file.contenttofile.target(resolved against thecomponentsalias infancy.json). - Recursively resolve
registryDependencies— fetches and writes them too unless they already exist locally. - Collect every
dependenciesentry across the bundle, dedupe, and runnpm installfor any missing.
The CLI never overwrites a file you've already vendored unless you pass --overwrite.
list
Show every component available in the registry, grouped by package:
npx fancy-cli@latest list
# Output:
# react-fancy (68)
# accordion Accordion Stateful disclosure surface.
# button Button The flexible button.
# card Card Container with header/body/footer.
# ...
# fancy-flow (6)
# flow-editor FlowEditor Workflow canvas + executor.
# ...
Workflow nodes — add node / list nodes / search nodes
A fancy-flow graph runs on node kinds. The engine ships 27 builtins that need no install; the rest come from the node marketplace, and the CLI installs them per runtime.
# Find one by concept before you hand-roll a step in app code.
npx fancy-cli@latest search nodes "route with an llm"
# Every published node, grouped by category.
npx fancy-cli@latest list nodes
# Install — checks the node runs on the runtimes your project actually executes on.
npx fancy-cli@latest add node @acme/salesforce_upsert
add node is a subcommand rather than a flag because it installs something different from a component: components vendor source files; nodes install per-runtime packages after a compatibility check. A node installed only for TypeScript is invisible to a PHP runner and the graph fails at that node — add node reads the project's real runtimes and refuses a mismatch, which raw npm install / composer require cannot.
search <query>
Substring search across name, title, and description:
npx fancy-cli@latest search calendar
# accordion-panel Stateful disclosure surface...
# calendar Calendar Date picker built on a 6×7 grid...
# time-picker TimePicker Sibling of Calendar for time entry...
diff <name>
Compare the local vendored copy of a component against the latest registry version. Useful for spotting upstream improvements you might want to merge in.
npx fancy-cli@latest diff card
Prints a unified diff. The CLI doesn't apply changes automatically — that's intentional, since the whole point of vendoring is that you may have customized the local copy.
Configuration reference (fancy.json)
| Key | Default | What it controls |
|---|---|---|
registry |
https://ui.particle.academy |
The base URL of the registry. Override for self-hosted mirrors. |
aliases.components |
@/components/fancy |
Where component files land. |
aliases.utils |
@/lib/utils |
Where shared utilities (the cn helper) land. |
rsc |
false |
If true, mark client components with "use client". Currently a no-op for React 19 server components. |
tsx |
true |
Emit .tsx (true) or .jsx (false). |
tailwind.css |
src/index.css |
Stylesheet to extend if a component ships CSS. |
Self-hosting the registry
Point registry at any URL that follows the registry contract. The CLI doesn't care whether it's our hosted registry, a private mirror, or a local file server — as long as GET {registry}/r/{name}.json returns a valid registry-item.
What this is not
- It's not a build tool. Once components are vendored they're just files in your codebase. You compile them with your existing bundler.
- It's not a runtime dependency. You can delete
fancy.jsonand uninstall the CLI; the vendored components keep working. - It's not the only way to use Fancy UI. The npm-install path remains a first-class citizen — see Installation.
