CLI Reference

The Frontfriend CLI helps you manage design tokens and components in your project.

Installation

The CLI is included when you install the Frontfriend package:

npm install @frontfriend/tailwind

Global Options

All commands support these global options:

• --verbose - Enable verbose output for debugging
• --help - Show help for any command

Commands

init

Initialize or update design tokens from your Frontfriend project.

npx frontfriend init [options]

Options:

• --force - Force refresh tokens, ignoring cache

Examples:

# Initialize tokens
npx frontfriend init
 
# Force refresh tokens
npx frontfriend init --force

status

Check your Frontfriend configuration and cache status.

npx frontfriend status

Output includes:

• Configuration file location and validity
• ff-id from config
• Cache status and age
• Token summary

add

Add generated pages or entire projects from the Frontfriend platform to your local codebase.

npx frontfriend add <type> <id> [options]

Arguments:

• <type> - Either page or project
• <id> - The page ID or project ID from Frontfriend platform

Options:

• --name <name> - Custom name for the component (default: derives from page title)
• --path <path> - Custom output path (default: src/pages)
• --force - Overwrite existing files without prompting
• --pages <ids> - When adding a project, specify which pages to include (comma-separated)

Examples:

# Add a single page
npx frontfriend add page abc123
 
# Add a page with custom name
npx frontfriend add page abc123 --name HomePage
 
# Add a page to custom directory
npx frontfriend add page abc123 --path ./src/views
 
# Add all pages from a project
npx frontfriend add project xyz789
 
# Add specific pages from a project
npx frontfriend add project xyz789 --pages page1,page2,page3
 
# Force overwrite existing files
npx frontfriend add page abc123 --force

Features:

• Automatically downloads required UI components
• Converts imports to use your local component paths
• Handles component naming and exports
• Shows progress for multi-page imports
• Validates ff-id to ensure pages belong to your design system

download

Download pre-built components to your project.

npx frontfriend download <components...> [options]

Arguments:

• <components...> - Component names to download (or all for all components)

Note: When using all, the command will download both standard components and any custom components specific to your ff-id.

Options:

• -f, --framework <framework> - Framework version (react or vue)
• -o, --output <path> - Custom output directory
• --overwrite - Overwrite existing files

Examples:

# Download all React components
npx frontfriend download all -f react
 
# Download specific Vue components
npx frontfriend download button card -f vue
 
# Download to custom directory
npx frontfriend download accordion -f react -o ./src/components
 
# Download and overwrite existing files
npx frontfriend download button -f react --overwrite

Post-download: After successful downloads, the CLI will display any required dependencies that need to be installed.

clean

Clear the Frontfriend token cache.

npx frontfriend clean

Configuration

The CLI reads configuration from frontfriend.config.js in your project root.

Config Format

// CommonJS
module.exports = {
  'ff-id': 'your-project-id',
  'aliases': {
    'ui': '@/components/ui'
  }
}
 
// ES Module
export default {
  'ff-id': 'your-project-id',
  'aliases': {
    'ui': '@/components/ui'
  }
}

Config Options

• ff-id (required) - Your Frontfriend project ID
• aliases (optional) - Path aliases for component downloads
  • ui - Where UI components should be downloaded

Exit Codes

• 0 - Success
• 1 - General error
• 2 - Configuration error
• 3 - Network error
• 4 - Invalid arguments

Troubleshooting

Command not found

Ensure you're using npx or have added to package.json scripts:

{
  "scripts": {
    "ff:init": "frontfriend init",
    "ff:download": "frontfriend download"
  }
}

Permission errors

On Unix systems, you may need to make the CLI executable:

chmod +x node_modules/@frontfriend/tailwind/dist/cli.js

Behind a proxy

Set standard Node.js proxy environment variables:

export HTTP_PROXY=http://proxy.company.com:8080
export HTTPS_PROXY=http://proxy.company.com:8080