casper's Profile Image

Full Stack Web/Mobile Developer

Dec, 29, 2024

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.

Next Js Tutorial #1 - Shadcn Ui (tailwind Css Library) Installation Image

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

Comments (0)