How to use Shadcn UI with NextJS and Tailwind CSS

Author: Jenesh Napit

Engineering Manager | Senior Software Engineer

Date Modified: June 30, 2024

Date Published: April 30, 2024

Shadcn UI is a library that you can use to create dynamic components. In this tutorial we’ll learn how to quickly setup Shadcn for any Nextjs project with Tailwind CSS. At the end you’ll learn how to build UI components like the login component below.

Shadcn and Tailwind are a match made in heaven, so let’s get started.

Create a NextJS 14 project

npx create-next-app@latest app-name --tailwind

If you want to add typescript and EsLint you can add the additional flags

--typescript --eslint

Next we'll need to answer a few questions, you can follow as it is below:

Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y) y
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? (recommended) Yes
✔ Would you like to customize the default import alias (@/*)? No

After this completes we can now add Shadcn UI to our project.

Adding Shadcn UI to our app

cd app-name
npx shadcn-ui@latest init

It will ask a few questions and you can follow as it is below:

Need to install the following packages:
shadcn-ui@0.8.0
Ok to proceed? (y) y
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Neutral
✔ Would you like to use CSS variables for colors? yes

Once initialized you will see

Success! Project initialization completed. You may now add components.

and if you look in the folders you will see a components.json and you’re done with the setup!

Now let’s building out UI.

Install and Use Shadcn UI components

So by default we will not have any Shadcn ui components and we’ll need to add the components as needed.

So for our Login component we’ll need a Button.

To import the button run this command:

npx shadcn-ui@latest add button

In your /src/components/ui you will now see the button.tsx

So let’s delete everything in /src/app/page.tsx and add the code below:

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center gap-4">
      <h1>Home</h1>
      <Button variant={"default"}>Click me</Button>
      <Button variant={"destructive"}>Click me</Button>
      <Button variant={"ghost"}>Click me</Button>
      <Button variant={"link"}>Click me</Button>
      <Button variant={"outline"}>Click me</Button>
      <Button variant={"secondary"}>Click me</Button>
    </div>
  )
}

and let’s run our server

npm run dev

Then our page will look something like this.

ShadcnUI-1

As you can see we’ll get a variety of buttons using the varient prop. With this prop we can instantly change the look of the button and this will be consistent everywhere inside of our app.

We can actually do much more and if interested you can see the full line up in the Shadcn UI docs.

One thing to note is during the installation we had the option of going with Style as Default or New York using the docs we can see what that would have looked like for all the components.

ShadcnUI-2

Okay next we’ll grab another component that will be the Input so in a new terminal you can run while our localhost is still running:

npx shadcn-ui@latest add input

Then in /src/app/page.tsx let’s update the code to:

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center min-h-screen">
      <div className="w-[300px] bg-gray-50 flex flex-col text-center p-4 rounded-lg shadow-md gap-4">
        <h1 className="font-bold text-2xl">Login</h1>
        <Input placeholder="Username" />
        <Input placeholder="Password" />
        <Button variant={"default"}>Submit</Button>
        <Button variant={"secondary"}>Sign Up</Button>
      </div>
    </div>
  )
}

With just a few lines of code we were quickly able to make a simple Login component using Shadcn UI.

ShadcnUI-3

This was a very simple component we created using Shadcn but now you have the basics you can do anything you want with these components and make your apps more consistent whiling building them faster.

Note to create a actual form Shadcn has documentations on how to create a proper <Form /> component so make sure to check it out.

Summary

We’ve only scratched the surface but now you know how to setup and get started. 🎉

🚨 Do you need a Portfolio Website? 🚨

With MyDevPage you can build your own portfolio website in 1 minute. You need to focus on building great projects and enhancing your skills rather than wasting your time in building and designing a portfolio website from scratch.

MyDevPage handles everything: