Place frontfriend.config.js at the application root. The file connects your application to a Design System and tells the downloader where component source belongs.
A React application
export default {
'ff-id': 'YOUR_DESIGN_SYSTEM_ID',
name: 'my-app',
tag: 'base',
adopt: ['contracts', 'tokens', 'components'],
framework: 'react',
primitive: 'base',
aliases: {
ui: '@/components/ui',
},
};A Vue application
export default {
'ff-id': 'YOUR_DESIGN_SYSTEM_ID',
name: 'my-app',
tag: 'base',
adopt: ['contracts', 'tokens', 'components'],
framework: 'vue',
primitive: 'reka',
aliases: {
ui: '@/components/ui',
},
};Use module.exports in CommonJS projects. Keep the module format consistent with your application’s package configuration.
Identity is not a credential
The ff-id identifies the Design System. Authentication and authorization still determine access to private data and operations. Never put personal tokens or Figma credentials into the source-controlled configuration.
Path aliases
The ui alias controls the component destination. It should agree with your TypeScript and bundler aliases. React installs generally use a single kebab-case file; Vue components use a folder with a barrel export.
Default and saved targets
New React applications default to Base UI. Vue applications default to Reka. Setup keeps saved targets and detects existing primitive packages before it uses a default. A Radix Slot utility alone does not select Radix.
Component installs use an authenticated immutable Release and frontfriend.lock.json. Do not change a saved target to migrate installed components; use the migration flow and verify the application build.
Monorepos
Configure each consuming application deliberately. Resolve CLI commands from that application’s root and keep each Application’s target explicit. Shared tokens can come from one Design System while the installed source remains target-specific.
After editing configuration, run pnpm exec frontfriend status, regenerate tokens, and verify the application build.
Studio endpoint
The SDK connects to https://app.frontfriend.dev by default. Set api-url only when your team provides a custom Frontfriend endpoint.
For commands that support it, --api-url overrides project api-url, then FF_API_URL, then the stored login URL, then the default platform. Keep credentials out of this file.