Frontfriend Integration Guide for React + Next.js

This guide will walk you through integrating Frontfriend with your React or Next.js project.

Prerequisites

React project (Next.js, Vite, or Create React App)
Node.js >= 16
Tailwind CSS installed (or will be installed)

Installation

Step 1: Install Dependencies

# Install Frontfriend Tailwind plugin
npm install @frontfriend/tailwind
 
# Install Tailwind CSS v3 if not already installed
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Step 2: Create Configuration

Create frontfriend.config.js in your project root:

module.exports = {
  'ff-id': 'your-frontfriend-id-here',  // Replace with your actual FF ID
  'aliases': {
    'ui': '@/components/ui'  // Where components will be downloaded
  }
}

Step 3: Configure Tailwind

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [
    require('@frontfriend/tailwind')()
  ],
}

Step 4: Import Tailwind CSS

For Next.js, in app/globals.css or styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Configure Next.js

For Next.js projects, you need to wrap your config with frontfriend:

Update next.config.js:

const frontfriend = require('@frontfriend/tailwind/next')
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Your existing config...
}
 
module.exports = frontfriend(nextConfig)

The frontfriend wrapper ensures proper integration with Frontfriend's build process and hot reloading.

For TypeScript projects, also update tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Step 6: Initialize Design Tokens

# Fetch your design tokens from Frontfriend
npx frontfriend init

This creates a local cache of your design system tokens.

Step 7: Download React Components

# Download all available React components
npx frontfriend download all -f react
 
# Or download specific components
npx frontfriend download button card accordion -f react

Components will be downloaded to src/components/ui/ (as configured in your aliases).

Using Design Tokens

After initialization, use your design tokens as Tailwind utilities:

export default function Example() {
  return (
    <div className="bg-brand-low text-brand-strong p-4">
      <h1 className="text-2xl font-bold mb-4">Design System Connected</h1>
      <p className="text-neutral-mid">
        Your Frontfriend tokens are now available as Tailwind utilities.
      </p>
    </div>
  );
}

Using Components

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
 
export default function Example() {
  return (
    <Card className="p-6">
      <h2 className="text-xl font-semibold mb-4">Welcome</h2>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}