Next.js Installation

Setting up Elixir UI in a Next.js project is straightforward. Follow this guide for both new and existing Next.js applications.

New Next.js Project

If you're starting a new project, create a Next.js app first:

npx create-next-app@latest my-app --typescript --tailwind --app

cd my-app

Install Elixir UI

Run the initialization command in your Next.js project:

npx @elixir-labs/ui init

This command will automatically detect Next.js and configure everything for you:

Install required dependencies
Update your tailwind.config.ts
Configure path aliases in tsconfig.json
Set up the components directory

Configuration Details

Here's what the init command configures automatically:

tailwind.config.ts

import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{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: [],
} satisfies Config

export default config

tsconfig.json Paths

The init command updates your tsconfig.json with path aliases:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@/components/*": ["./components/*"],
      "@/lib/*": ["./lib/*"]
    }
  }
}

Adding Your First Component

Now you can add components to your Next.js project:

npx @elixir-labs/ui add button

Use it in your page or component:

// app/page.tsx
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
        <h1 className="text-4xl font-bold text-center mb-8">
          Welcome to Next.js with Elixir UI
        </h1>
        
        <div className="flex gap-4 justify-center">
          <Button>Primary Button</Button>
          <Button variant="secondary">Secondary Button</Button>
          <Button variant="outline">Outline Button</Button>
        </div>
      </div>
    </main>
  );
}

App Router vs Pages Router

Elixir UI works with both Next.js App Router and Pages Router. The installation is identical, but import paths may differ slightly:

App Router

// app/page.tsx
import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Click me</Button>;
}

Pages Router

// pages/index.tsx
import { Button } from "@/components/ui/button";

export default function HomePage() {
  return <Button>Click me</Button>;
}

Server Components

All Elixir UI components are compatible with React Server Components by default. If you need client-side interactivity, add the "use client" directive:

"use client";

import { Button } from "@/components/ui/button";
import { useState } from "react";

export default function InteractiveComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <Button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </Button>
  );
}

Troubleshooting

Common issues and solutions:

Module not found errors

Make sure your tsconfig.json includes the proper path aliases and restart your dev server.

Styling issues

Ensure Tailwind CSS is properly configured and your CSS variables are included in globals.css.

TypeScript errors

Run `npm run build` to check for TypeScript errors and ensure all dependencies are installed.

Next Steps

Your Next.js project is now ready to use Elixir UI components. Explore our component library and start building beautiful interfaces!

Browse Components View Templates

Elixir UI

Getting Started

Installation

Components

Templates

More