You can also watch the YouTube video: [Next JS Tutorial #1 | ShadCN UI (Tailwind CSS Library) Installation](https://www.youtube.com/watch?v=fe0cqfbDzc8) ### Creating the Next Js App ```bash npx create-next-app@latest ``` ```bash What is your project named? >> nextjs-ecommerce Would you like to use TypeScript? >> No Would you like to use ESLint? >> No Would you like to use Tailwind CSS? >> Yes Would you like your code inside a `src/` directory? >> No Would you like to use App Router? (recommended) >> Yes Would you like to use Turbopack for `next dev`? >> Yes Would you like to customize the import alias (`@/*` by default)? >> No ``` I'll use `yarn` so I'll delete `package-lock.json` file and I'll use command `yarn` to install dependencies using yarn. Add `suppressHydrationWarning` html attribute in your html tag to avoid future hydration errors. Edit `layout.jsx` in `app` folder: ```js import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900", }); const geistMono = localFont({ src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900", }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode, }>) { return ( {children} ); } ``` ### Installing ShadCN UI ```bash npx shadcn@latest init -d ``` That's it our shadcn installation is completed, let's try to use a ShadCN UI component. ```bash npx shadcn@latest add dialog button input label ``` Edit `page.jsx` in `app` folder: ```js import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import logo from "@/public/next.svg"; import Image from "next/image"; export default function Home() { return (

); } ``` That's it for this tutorial, we created next js app with tailwind css and installed shadcn ui. Next tutorial we'll start designing our app much more easier.