// Install and work with uifork, a CLI tool and React component library for managing UI component versions. Use when the user wants to version components, test UI variations, gather stakeholder feedback, or work with uifork commands like init, watch, new, fork, promote.
| name | uifork |
| description | Install and work with uifork, a CLI tool and React component library for managing UI component versions. Use when the user wants to version components, test UI variations, gather stakeholder feedback, or work with uifork commands like init, watch, new, fork, promote. |
UIFork is a CLI tool and React component library for managing UI component versions. Create multiple versions of components, let stakeholders switch between them to test and gather feedback, and promote the best one when ready.
npm install uifork
Or use yarn, pnpm, or bun.
Add the UIFork component to your React app root. Typically shown in development and preview/staging (not production):
Vite:
import { UIFork } from "uifork";
const showUIFork = import.meta.env.MODE !== "production";
function App() {
return (
<>
<YourApp />
{showUIFork && <UIFork />}
</>
);
}
Next.js (App Router):
// components/UIForkProvider.tsx
"use client";
import { UIFork } from "uifork";
export function UIForkProvider() {
if (process.env.NODE_ENV === "production") return null;
return <UIFork />;
}
// app/layout.tsx
import { UIForkProvider } from "@/components/UIForkProvider";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<UIForkProvider />
</body>
</html>
);
}
Next.js (Pages Router):
// pages/_app.tsx
import { UIFork } from "uifork";
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
{process.env.NODE_ENV !== "production" && <UIFork />}
</>
);
}
No separate CSS import needed - styles are automatically included.
npx uifork src/components/Button.tsx
Or use the explicit form:
npx uifork init src/components/Button.tsx
This will:
versions.ts file to track all versions-w flag with either form)UIFork auto-detects whether the component uses a default export or a named export and generates the correct versioning scaffolding. If the file has multiple exported components and detection is ambiguous, specify which export to fork:
npx uifork init src/components/Button.tsx --export Button
npx uifork init src/components/Button.tsx --export default
// Default export (auto-detected)
import Button from "./components/Button";
// Named export (auto-detected)
import { Button } from "./components/Button";
// Works exactly as before - active version controlled by UIFork widget
<Button onClick={handleClick}>Click me</Button>;
All commands use npx uifork:
Initialize versioning for an existing component by passing the path directly.
npx uifork src/components/Dropdown.tsx
npx uifork src/components/Dropdown.tsx -w # Start watching after init
Or use the explicit form:
npx uifork init src/components/Dropdown.tsx
npx uifork init src/components/Dropdown.tsx -w # Start watching after init
npx uifork init src/components/Dropdown.tsx --export Button # Specify which export to fork
watch [directory]Start the watch server (enables UI widget communication).
npx uifork watch # Watch current directory (port 3030)
npx uifork watch ./src # Watch specific directory
npx uifork watch --port 3002 # Custom port
npx uifork watch ./src --port 3002 # Directory + custom port
When using a custom port, pass the same port to the UIFork component: <UIFork port={3002} />.
Important: After generating new version files (e.g., manually or via AI agents), run the watch command to regenerate the corresponding versions.ts files.
new <component-path> [version-id]Create a new empty version file.
npx uifork new Button # Auto-increment version number
npx uifork new Button v3 # Specify version explicitly
fork <component-path> <version-id> [target-version]Fork an existing version to create a new one.
npx uifork fork Button v1 # Fork v1 to auto-incremented version
npx uifork fork Button v1 v2 # Fork v1 to specific version
npx uifork duplicate Button v1 v2 # Alias for fork
rename <component-path> <version-id> <new-version-id>Rename a version.
npx uifork rename Button v1 v2
delete <component-path> <version-id>Delete a version (must have at least one version remaining).
npx uifork delete Button v2
promote <component-path> <version-id>Promote a version to be the main component and remove all versioning scaffolding.
npx uifork promote Button v2
This will:
Button.tsx with content from Button.v2.tsxButton.v*.tsx)Button.versions.tsAfter running npx uifork src/components/Button.tsx (or npx uifork init src/components/Button.tsx):
src/components/
āāā Button.tsx # Wrapper component (import this)
āāā Button.versions.ts # Version configuration
āāā Button.v1.tsx # Original component (version 1)
āāā Button.v2.tsx # Additional versions
āāā Button.v1_1.tsx # Sub-versions (v1.1, v2.1, etc.)
Both default exports and named exports are supported. UIFork auto-detects the export style during init and maintains it across all version files.
v1, v2, v3 - Major versionsv1_1, v1_2 - Sub-versions (displayed as V1.1, V1.2 in UI)v2_1, v2_2 - Sub-versions of v2The UIFork component provides a floating UI widget that allows:
Keyboard shortcuts: Cmd/Ctrl + Arrow Up/Down to cycle through versions
Settings: Theme (light/dark/system), position, code editor preference
For more control over when UIFork appears:
// Enable via NEXT_PUBLIC_ENABLE_UIFORK=true or VITE_ENABLE_UIFORK=true
const showUIFork =
process.env.NODE_ENV !== "production" ||
process.env.NEXT_PUBLIC_ENABLE_UIFORK === "true";
Useful for:
npm install uifork<UIFork /> component to app rootnpx uifork src/components/MyComponent.tsx (or npx uifork init src/components/MyComponent.tsx)npx uifork watch# Create empty version
npx uifork new Button
# Or fork existing version
npx uifork fork Button v1
npx uifork promote Button v2
This removes all versioning and makes v2 the main component.
ForkedComponent reads active version from localStorage and renders corresponding componentUIFork connects to watch server and displays all available versionsForkedComponent to re-renderversions.ts automaticallyAfter generating new version files: When creating version files manually or via AI agents, run npx uifork watch to regenerate the versions.ts files so the new versions appear in the UIFork widget.