
Next Js Tutorial #1 - Shadcn Ui (tailwind Css Library) Installation
Let's learn how to use next js making a beautiful, fully functional e-commerce website.

You can also watch the YouTube video:
Next JS Tutorial #1 | ShadCN UI (Tailwind CSS Library) Installation
Creating the Next Js App
npx create-next-app@latest
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:
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 (
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
Installing ShadCN UI
npx shadcn@latest init -d
That's it our shadcn installation is completed, let's try to use a ShadCN UI component.
npx shadcn@latest add dialog button input label
Edit page.jsx
in app
folder:
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 (
<div className="pt-16 container mx-auto flex items-center justify-center">
<Dialog>
<DialogTrigger className="bg-blue-500 px-2 py-1 rounded-md text-white text-sm">
Open
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>
<div className="flex items-center mr-4">
<Image className="w-24 h-8 mr-3" src={logo} alt="Logo" />
</div>
</DialogTitle>
</DialogHeader>
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Sign in to your account
</h1>
<div>
<Label htmlFor="email">Your email address</Label>
<Input type="text" id="email" name="email" placeholder="Email" />
</div>
<div>
<Label htmlFor="password">Password</Label>
<Input
type="password"
id="password"
name="password"
placeholder="Password"
/>
</div>
<Button>Sign In</Button>
</div>
</DialogContent>
</Dialog>
</div>
);
}
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.
0
0