Next.js & NextUI Template

The Next.js & NextUI Template is a boilerplate for scaffolding a new web application with the Next.js 13 app directory and the NextUI v2 component library. It gives developers a pre-configured project with a modern React stack, so they can skip the repetitive setup and start building immediately.

What is the Next.js & NextUI Template?

This is an open-source starter project that combines Next.js 13's app router with NextUI v2, a React UI library. It produces a project with Tailwind CSS, TypeScript, Framer Motion animations, and built-in theme switching. The template is published under an MIT license, so it is free to use, modify, and distribute.

Key Features

• Next.js 13 app directory — Uses the new app router for file-based routing, layouts, and server components.
• NextUI v2 — A React component library with customizable, accessible components built on Tailwind CSS.
• Tailwind CSS — Pre-integrated utility-first CSS framework for rapid styling.
• Tailwind Variants — A utility for managing variant-based styles in Tailwind, included as a dependency.
• TypeScript — Fully typed source code for better developer experience and maintainability.
• Framer Motion — An animation library pre-installed for smooth, declarative motion effects.
• next-themes — A package that adds light and dark theme switching with a single hook.
• create-next-app support — The template can be used directly via npx create-next-app -e https://github.com/nextui-org/next-app-template.

Who is it for?

• Frontend developers who want to start a project with a modern React stack and skip the repetitive setup.
• Startup teams that need a clean codebase with styled UI components and theming out of the box.
• Developers building with NextUI who want an official reference implementation to adapt.

What can you do with the Next.js & NextUI Template?

• Create a new project in one command — Run npx create-next-app -e https://github.com/nextui-org/next-app-template and get a working foundation.
• Build a landing page or marketing site — Use the included layout, Tailwind utilities, and Framer Motion animations to assemble pages quickly.
• Prototype an internal tool or dashboard — Leverage NextUI's forms, tables, and modals with TypeScript and dark mode already configured.

How does the template work?

After scaffolding via create-next-app, you install dependencies with npm install and start development with npm run dev. The project includes an app directory for routes, a components folder for UI parts, and configuration files for Tailwind and TypeScript.

Pricing

The template is free and open source under the MIT license.

Alternatives

• create-next-app — The official Next.js starter that generates a bare project without NextUI or Tailwind preconfigured.
• shadcn/ui — A component collection you can copy into your own Next.js app, offering a different approach to styling and component ownership.

FAQ

Is the Next.js & NextUI Template free?

Yes, the template is licensed under the MIT license, which allows free use, modification, and distribution with attribution.

How do I create a project using this template?

Run npx create-next-app -e https://github.com/nextui-org/next-app-template in your terminal, then follow the prompts. After that, install dependencies and start the dev server.

Does the template include theme switching?

Yes, it includes the next-themes package, so light and dark mode functionality is already wired up.

What version of Next.js does it use?

It specifies Next.js 13 and the app directory. The template is designed for that major version.

Can I use it without NextUI?

No, NextUI is a core part of the template. If you want plain Tailwind or different components, consider create-next-app or another starter.