Next.js Installation

Step-by-step setup guide for integrating Elementra UI into Next.js App Router applications.

Create Next.js Project

Initialize a new Next.js application with Tailwind CSS and TypeScript.

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

Install Dependencies

Install Elementra UI core and motion dependencies.

npm install elementra-ui lucide-react framer-motion clsx tailwind-merge

Configure Tailwind CSS

Ensure your tailwind.config.js includes the elementra component styles.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './app/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Add Components via CLI

Add any of the 50+ components straight into your project.

npx elementra-ui add button alert-dialog carousel

50 Interactive Components

Next.js Setup Guide