• Logo

    Elementra UI

    v0.1.7 - Documentation
  1. Docs
  3. Installation/next/

Next.js Setup Guide

A comprehensive guide to installing and configuring Next.js

If you're using Next.js 15, see the Next.js 15 + React 19 guide

01Create Project

npm i elementra-ui

Install additional utility dependencies

npm install clsx tailwind-merge
npm install -D tailwindcss postcss autoprefixer

02Tailwind Configuration

npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // Custom theme configurations
    },
  },
  plugins: [
    require("tailwindcss-animate"),
  ],
}

03Component Usage

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

export default function Buttons() {
  return (
    <div className="space-x-4">
      <Button variant="default">Primary Button</Button>
      <Button variant="outline">Secondary Button</Button>
      <Button variant="ghost">Outline Button</Button>
    </div>
  )
}

04Add Components Using CLI

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.

? Select components to add ›
Instructions:
↑/↓: Highlight option
←/→/[space]: Toggle selection
a: Toggle all
enter/return: Complete answer
◯ Button
◯ Card
◯ Alert
◯ Input
Component button added successfully!