Installation
A guide to setting up your project with the necessary dependencies and structure.
This project is built with Next.js and leverages TypeScript and Tailwind CSS for all its components. Some components also require shadcn/ui and Framer Motion. While we recommend TypeScript for optimal development experience, JavaScript is also supported.
Configure components.json
You will be asked a few questions to configure components.json:
Add cn helper
I use a cn
helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in lib/utils.ts
:
App structure
Here's how I structure my Next.js apps. You can use this as a reference:
page.tsx
layout.tsx
button.tsx
site-header.tsx
site-footer.tsx
utils.ts
globals.css
components.json
next.config.js
package.json
postcss.config.js
tailwind.config.ts
tsconfig.json
- I place the UI components
shadcn/ui
in thecomponents/ui
folder. - The rest of the components such as
<SiteHeader />
and<SiteFooter />
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.
Last updated on