Next.Js

Template

We have a Next.Js template pre configured with all the packages that need to be installed to use Pixel UI Components and already includes some Components.

Paste below command in your preferred CLI to clone the template from Github.

$ npx create-next-app -e https://github.com/Navin-Jethwani-76/pixelui-nextjs-template

Installation (App Router)

Create A New Next.Js Project
```
$ npx create-next-app@latest
```
Choose Yes when asked if you want to use App Router

Install Required Packages

$ npm install @nextui-org/react framer-motion tailwindcss-animated react-icons

Tailwind CSS Setup

// tailwind.config.js
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui(), require("tailwindcss-animated")]
}

export default config;// tailwind.config.js
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui(), require("tailwindcss-animated")]
}

export default config;

Setup Provider

// app/providers.tsx
'use client'

import {NextUIProvider} from '@nextui-org/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}// app/providers.tsx
'use client'

import {NextUIProvider} from '@nextui-org/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}

Add Provider to Root

// app/layout.tsx
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}// app/layout.tsx
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Install next-themes to switch between light and dark themes (Optional)
```
$ npm install next-themes
```
Add next-themes provider
// app/providers.tsx "use client"; import {NextUIProvider} from '@nextui-org/react' import {ThemeProvider as NextThemesProvider} from "next-themes"; export function Providers({children}: { children: React.ReactNode }) { return ( <NextUIProvider> <NextThemesProvider attribute="class" defaultTheme="dark"> {children} </NextThemesProvider> </NextUIProvider> ) }

Installation (Pages Router)

Create A New Next.Js Project
```
$ npx create-next-app@latest
```

On installation, you'll see the following prompts:

$ What is your project named? my-app

$ Would you like to use TypeScript? No / Yes

$ Would you like to use ESLint? No / Yes

$ Would you like to use Tailwind CSS? No / Yes

$ Would you like to use `src/` directory? No / Yes

$ Would you like to use App Router? No (Choose `No` here)

$ Would you like to customize the default import alias (@/*)? No / Yes

$ What import alias would you like configured? @/*

Install Required Packages

$ npm install @nextui-org/react framer-motion tailwindcss-animated react-icons

Tailwind CSS Setup

// tailwind.config.js
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui(), require("tailwindcss-animated")]
}

export default config;// tailwind.config.js
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui(), require("tailwindcss-animated")]
}

export default config;

Setup Provider

// pages/_app.js
import {NextUIProvider} from '@nextui-org/react'

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default MyApp;// pages/_app.js
import {NextUIProvider} from '@nextui-org/react'

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default MyApp;

Install next-themes to switch between light and dark themes (Optional)
```
$ npm install next-themes
```
Add next-themes provider
// pages/_app.js import {NextUIProvider} from "@nextui-org/react"; import {ThemeProvider as NextThemesProvider} from "next-themes"; function MyApp({ Component, pageProps }) { return ( <NextUIProvider> <NextThemesProvider attribute="class" defaultTheme="dark"> <Component {...pageProps} /> </NextThemesProvider> </NextUIProvider> ) } export default MyApp;

Authentication

Cards

Application

Marketing

E-commerce

Template

Installation (App Router)

Installation (Pages Router)