Chapter 1: Introduction to Shadcn UI and Next.js

This guide will walk you through the process of constructing a modern and engaging user interface using Shadcn UI alongside Next.js. You will uncover a wealth of features, efficient coding strategies, and a smooth user experience. If you’re eager to develop captivating web applications, this extensive tutorial will be your gateway to harnessing the capabilities of Shadcn UI and Next.js in your web development projects.

By the end of this guide, you will be equipped with knowledge about:

• Fundamental principles of Shadcn UI and Next.js.
• Merging Shadcn UI with Next.js to create a responsive and engaging User Interface (UI).
• Utilizing Tailwind CSS and next-themes for enhanced and visually appealing designs.

Chapter 2: Setting Up Your Development Environment

Let’s initiate a new Next.js application to illustrate how to install Shadcn UI.

Note: When setting up the Next.js application, ensure to select Tailwind CSS as an option.

npx create-next-app@latest shadcn-ui-nextjs

cd shadcn-ui-nextjs

After establishing your Next.js application, configure Shadcn UI by running:

npx shadcn-ui@latest init

During the configuration process, you will be prompted with several questions regarding your setup:

• Would you like to use TypeScript (recommended)? no / yes
• Which style would you prefer? › Default
• What base color would you like? › Slate
• Where is your global CSS file located? › app/globals.css
• Would you like to use CSS variables for colors? › no / yes
• Where is your tailwind.config.js located? › tailwind.config.js
• Configure the import alias for components: › @/components
• Configure the import alias for utils: › @/lib/utils
• Are you utilizing React Server Components? › no / yes

After initializing Shadcn UI, your project structure will resemble the following:

app

├── layout.tsx

├── page.tsx

components

├── ui

│ ├── alert-dialog.tsx

│ ├── button.tsx

│ ├── dropdown-menu.tsx

│ └── ...

├── main-nav.tsx

├── page-header.tsx

└── ...

lib

├── utils.ts

styles

├── globals.css

next.config.js

package.json

postcss.config.js

tailwind.config.js

tsconfig.json

Now that we have created a Next.js application and initialized Shadcn UI, we can use the Shadcn CLI to incorporate various components into our application.

For instance, to add a button component, execute:

npx shadcn-ui@latest add button

This command will install the button component, resulting in the following code:

import * as React from "react";

import { Slot } from "@radix-ui/react-slot";

import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(

"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

{

variants: {

variant: {

default: "bg-primary text-primary-foreground hover:bg-primary/90",

destructive:

"bg-destructive text-destructive-foreground hover:bg-destructive/90",

outline:

"border border-input bg-background hover:bg-accent hover:text-accent-foreground",

secondary:

"bg-secondary text-secondary-foreground hover:bg-secondary/80",

ghost: "hover:bg-accent hover:text-accent-foreground",

link: "text-primary underline-offset-4 hover:underline",

},

size: {

default: "h-10 px-4 py-2",

sm: "h-9 rounded-md px-3",

lg: "h-11 rounded-md px-8",

icon: "h-10 w-10",

},

},

defaultVariants: {

variant: "default",

size: "default",

},

}

);

export interface ButtonProps

extends React.ButtonHTMLAttributes<HTMLButtonElement>,

VariantProps<typeof buttonVariants> {

asChild?: boolean;

}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

({ className, variant, size, asChild = false, ...props }, ref) => {

const Comp = asChild ? Slot : "button";

return (

<Comp

className={cn(buttonVariants({ variant, size, className }))}

ref={ref}

{...props}

/>

);

}

);

Button.displayName = "Button";

export { Button, buttonVariants };

As illustrated, several Radix UI packages are installed alongside Shadcn, as Shadcn utilizes Radix UI components internally.

You can now start utilizing the button component directly in your application:

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

export default function Home() {

return (

<div>

<Button>Click me</Button>

</div>

);

}

Here’s an example GitHub project I have created to demonstrate this setup.

Thank you for exploring Shadcn UI with Next.js. I trust this article has been both informative and beneficial for your web development endeavors.

If you have aspirations of starting a business, feel free to reach out via futuromy.com. I can assist in validating your startup idea and developing it!

If you found this article useful, consider checking out similar content. For any questions or feedback, don’t hesitate to send me a message!

Follow me on Twitter for updates.

Chapter 3: Video Tutorials

To further enhance your understanding, check out the following video resources.

In this video titled "Next.js with shadcn/ui || Architecture || Components || Themes," you will learn about the architecture and various components of Shadcn UI integrated with Next.js.

In the tutorial "How to Setup Shadcn UI + Themes in NextJs 14," you will discover step-by-step instructions for setting up Shadcn UI and themes in your Next.js applications.

Happy Coding!

Melih In Plain English

Thank you for being part of our community! Before you leave, please remember to clap and follow the writer! You can find even more content at PlainEnglish.io. Sign up for our free weekly newsletter and follow us on Twitter, LinkedIn, YouTube, and Discord.