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.

Creating the Next Js App

Installing ShadCN UI

Comments (0)