Next.js
Install and configure shadcn/ui for Next.js.
Install Next Js
System requirements
- Node.js 18.18 or later.
- macOS, Windows (including WSL), and Linux are supported.
Automatic installation
We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:
npx create-next-app@latestOn installation, you'll see the following prompts:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*After the prompts, create-next-app will create a folder with your project name and install the required dependencies.
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 initYou can use the -d flag for defaults i.e new-york, zinc and yes for the css variables.
npx shadcn@latest init -dYou 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 / yesYou can now start adding components to your project.
npx shadcn@latest add buttonThe command above will add the Button component to your project. You can then import it like this:
import { Button } from '@/components/ui/button';
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
);
}Install Framer Motion
Installation
npm install motionUsage
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-iconsUsage
import { FaSearch } from "react-icons/fa";
export default function Home() {
return (
<div>
<FaSearch />
</div>
);
}Canvas Confetti
npm install canvas-confettinpm i --save-dev @types/canvas-confettiUsage
import { useEffect } from "react";
import confetti from "canvas-confetti";
export default function Home() {
useEffect(() => {
confetti();
}, []);
return <div>Hello World</div>;
}Last updated on