Docs
Next.js

Next.js

Install and configure Next.js.

Create project

Start by creating a new Next.js project using create-next-app :

npx create-next-app@latest my-app --typescript --tailwind --eslint

Follow the Steps

Follow the steps and install dependencies and copy paste code of the components

Add Utils file

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

App structure

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── eldoraui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── navbar.tsx
│   ├── header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json
  • I place the UI components in the components/eldoraui folder.
  • The rest of the components such as <Header /> and <Navbar /> are placed in the components folder.
  • The lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.
  • The styles folder contains the global CSS.

That's it

You can now start adding components to your project.