Get Started

Install Next Js

Create a new project

npx create-next-app@latest

On installation You'll see these prompts

What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? Yes
Would you like to use src/ directory? Yes
Would you like to use App Router? (recommended)  Yes
Would you like to customize the default import alias (@/*)? No

Start the development server

cd my-app

npm run dev

Install ShadCN

For Next Js

Create project

Run the init command to create a new Next.js project or to setup an existing one:

npx shadcn@latest init

You can use the -d flag for defaults i.e new-york, zinc and yes for the css variables.

npx shadcn@latest init -d

Configure components.json

You will be asked a few questions to configure components.json:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

That's it

You can now start adding components to your project.

npx shadcn@latest add button

The command above will add the Button component to your project. You can then import it like this:

index.tsx

import { Button } from "@/components/ui/button";
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Create utils.tsx

Create a new file

Create a new file named utils.tsx in the lib folder of your project.

touch lib/utils.tsx

Add the following code to utils.tsx

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

Install Framer Motion

Installation

npm install motion

Usage

index.tsx

import { motion } from "motion/react";
 
export default function Home() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Hello World
    </motion.div>
  );
}

Other libraries

React Icons

npm install react-icons

Usage

index.tsx

import { FaSearch } from "react-icons/fa";
 
export default function Home() {
  return (
    <div>
      <FaSearch />
    </div>
  );
}

Canvas Confetti

npm install canvas-confetti

npm i --save-dev @types/canvas-confetti

Usage

index.tsx

import { useEffect } from "react";
import confetti from "canvas-confetti";
 
export default function Home() {
  useEffect(() => {
    confetti();
  }, []);
 
  return <div>Hello World</div>;
}

On this page