@frontfriend/eject

Convert a connected Frontfriend app into a standalone Tailwind app with local components, styles and utilities.

Requirements

• Node.js 20 or newer and Git.
• A Vue or React app using Vite or Next.js, with Tailwind CSS 3.
• Installed dependencies, including @frontfriend/tailwind.
• A Frontfriend config containing the design-system ff-id.
• A tailwind.config.ts, .js, .cjs or .mjs file and a CSS entry with @tailwind directives.
• A clean Git worktree, unless using --allow-dirty.

The output supports light mode only. Tailwind CSS 4 is not supported.

Usage

Run from your app directory:

npx @frontfriend/eject --name your-ds --dry
npx @frontfriend/eject --name your-ds

Replace your-ds with your design-system name: lowercase letters, numbers and hyphens, starting with a letter. Use --tag dev to select the dev tokens.

After ejecting, install dependencies and build your app:

pnpm install
pnpm build

Options

| Option | Description | | ----------------- | ----------------------------------------------------------------------------------------------- | | --name <name> | Design-system name. Prompts when omitted in an interactive terminal. | | --target <path> | App directory. Defaults to the current directory. | | --tag <tag> | Token tag. Defaults to the environment or project setting, then latest. | | --api-url <url> | API origin. Defaults to the environment or project setting, then https://app.frontfriend.dev. | | --dry | Preview changes without writing app files. | | --allow-dirty | Allow existing uncommitted changes. |

Output

• Component classes and icon names live in the components.
• Tailwind utilities use the downloaded design-system palette.
• cn lives in the app’s utilities module. Existing exports are preserved; imports follow the app’s configured aliases or use relative paths.
• styles/tokens.css contains fonts, custom CSS and runtime variables used by the app.
• The terminal output lists changes, token provenance and items to review.

The command fetches tokens automatically and removes the Frontfriend integration and its local caches (node_modules/.cache/frontfriend and node_modules/.frontfriend). Custom-theme prefixes use the supplied name, such as .your-ds-theme and --your-ds-brand. Classes that start with ff- are renamed the same way (ff-page-main becomes your-ds-page-main). Review theme behavior and application-specific names in the command output.

Running again with the same name preserves app sources and clears any remaining Frontfriend cache. --dry leaves files and caches unchanged.