Create project
Start by creating a new Next.js project using create-next-app
:
pnpm 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 thecomponents
folder. - The
lib
folder contains all the utility functions. I have autils.ts
where I define thecn
helper. - The
styles
folder contains the global CSS.
That's it
You can now start adding components to your project.