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
Install the main package:
npm i elementra-ui
Install utility dependencies:
npm install clsx tailwind-merge
Install development dependencies:
npm install -D tailwindcss postcss autoprefixer
02Tailwind Configuration
Initialize Tailwind CSS:
npx tailwindcss init -p
Update your tailwind.config.js:
/** @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
Example usage in your components:
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
Run the CLI command:
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!