Create React App Installation

Learn how to integrate Elixir UI with Create React App (CRA) projects. This guide covers both TypeScript and JavaScript setups.

New Create React App Project

Create a new React app with TypeScript (recommended):

npx create-react-app my-app --template typescript

cd my-app

Or with JavaScript:

npx create-react-app my-app

Install Tailwind CSS

Install and configure Tailwind CSS for your CRA project:

npm install -D tailwindcss

npx tailwindcss init

Configure your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your src/index.css:

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

Install Elixir UI

Install Elixir UI in your CRA project:

npx @elixir-labs/ui init

This will configure your CRA project with:

Required dependencies (clsx, framer-motion)
Updated Tailwind CSS configuration
Path aliases using CRACO or React App Rewired
Component directory structure
CSS variables setup

Path Aliases Setup

Since CRA doesn't support path aliases by default, we'll use CRACO:

npm install -D @craco/craco

Create a craco.config.js in your project root:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

Update your package.json scripts:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

TypeScript Configuration

For TypeScript projects, update your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "es6"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src"
  ]
}

Updated Tailwind Configuration

Your tailwind.config.js will be updated with Elixir UI theme:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [],
}

Adding Your First Component

Add a component to your CRA project:

npx @elixir-labs/ui add button

Update your src/App.tsx (or src/App.js):

import React from 'react';
import { Button } from '@/components/ui/button';
import './App.css';

function App() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="max-w-md mx-auto text-center space-y-6 p-6">
        <h1 className="text-4xl font-bold text-foreground">
          React + Elixir UI
        </h1>
        
        <p className="text-muted-foreground">
          Beautiful, accessible components for your React app
        </p>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button>Get Started</Button>
          <Button variant="secondary">Documentation</Button>
          <Button variant="outline">View Source</Button>
        </div>
        
        <div className="grid grid-cols-2 gap-4 mt-8">
          <Button variant="ghost" size="sm">
            Small Ghost
          </Button>
          <Button variant="destructive" size="sm">
            Destructive
          </Button>
        </div>
      </div>
    </div>
  );
}

export default App;

Development and Building

Start your development server:

npm start

Your app will be available at http://localhost:3000

Build for production:

npm run build

Alternative: Without CRACO

If you prefer not to use CRACO, you can use relative imports:

// Instead of @/components/ui/button
import { Button } from './components/ui/button';

// Or from a deeper component
import { Button } from '../../components/ui/button';

However, we recommend using CRACO for better import paths and development experience.

Testing Components

Test your Elixir UI components with React Testing Library:

import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from '@/components/ui/button';

test('renders button with text', () => {
  const handleClick = jest.fn();
  
  render(
    <Button onClick={handleClick}>
      Click me
    </Button>
  );
  
  const button = screen.getByRole('button', { name: /click me/i });
  expect(button).toBeInTheDocument();
  
  fireEvent.click(button);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Troubleshooting

Common issues with CRA setup:

CRACO errors

Make sure you've updated your package.json scripts to use "craco" instead of "react-scripts".

Path resolution issues

Ensure both craco.config.js and tsconfig.json have matching path configurations.

Tailwind not working

Verify that Tailwind directives are in your src/index.css and the file is imported in src/index.tsx.

Build errors

Run "npm run build" to check for TypeScript errors and ensure all imports are correct.

Migration from CRA

Consider migrating to Vite for better performance and development experience:

Vite offers faster builds, better TypeScript support, and simpler configuration. Check out our Vite installation guide for migration steps.

Next Steps

Your Create React App is now ready with Elixir UI! Start building beautiful interfaces.

Browse Components View Templates

Elixir UI

Getting Started

Installation

Components

Templates

More