Tailwind Resources Logo Tailwind Resources
Next Pages Template screenshot

Next Pages Template

Author Avatar Theme by Heroui inc
Updated: 1 May 2025
86 Stars

A Next.js 15 with pages directory template pre-configured with HeroUI (v2) and Tailwind CSS.

Github Live Preview

Categories

Nextjs React Nextui Ui kits & component libraries

Overview

The Next.js & NextUI Template is a pre-built template designed to simplify the process of creating applications using Next.js 13 and NextUI v2. It utilizes various technologies such as Tailwind CSS, TypeScript, Framer Motion, and next-themes to provide developers with a solid foundation for building robust and visually appealing web applications.

Features

  • Next.js 13: Utilize the latest version of Next.js with improved performance and features.
  • NextUI: Take advantage of NextUI v2, a component library that offers a wide range of customizable UI components.
  • Tailwind CSS: Easily apply pre-defined and custom styles using the popular utility-first CSS framework.
  • Tailwind Variants: Leverage Tailwind CSS variants to modify component styles based on different states or conditions.
  • TypeScript: Enjoy the benefits of TypeScript, including static typing and improved code organization.
  • Framer Motion: Enhance the user experience with smooth and interactive animations powered by Framer Motion.
  • next-themes: Seamlessly implement theme switching functionality in your application with the help of next-themes.

Installation

To use this template and create a new project, follow the steps below:

  1. Install create-next-app globally by running the command npm install -g create-next-app.
  2. Create a new project using the template by running npx create-next-app@13.0.0-next-1234 --example <template-github-repo>.
  3. Replace <template-github-repo> with the URL of the Next.js & NextUI Template repository. This can be found on the template’s GitHub page.
  4. Once the project is created, navigate to the project directory using cd <project-name>.
  5. Start the development server by running npm run dev.
  6. Open a web browser and visit http://localhost:3000 to see your application.

Summary

The Next.js & NextUI Template is a comprehensive template that combines the power of Next.js 13 and NextUI v2 to simplify the process of creating web applications. With a wide range of features, including support for Tailwind CSS, TypeScript, Framer Motion, and next-themes, developers can quickly build visually appealing and interactive applications. The installation process is straightforward, allowing developers to get up and running with their projects in no time. Overall, this template provides a solid foundation for building modern and efficient web applications.