How to use Shadcn UI in your Nextjs Project?

I recently wrote about Shadcn UI — a React component library that revolutionized the way we think of UI components. In this blog, we will see how you can use Shadcn UI in your project, and how you can take the most out of it.

What is Shadcn UI?

Shadcn UI takes a unique approach to UI components. Rather than installing a third-party dependency and importing desired components, you can manually copy-paste the components into your codebase and use them just like any other components you wrote.

The components are built on top of Radix Primitives and Tailwind CSS. That means they are highly customizable, accessible, and robust. This gives you full ownership of your UI components while keeping them highly functional, performant, and reusable.

You can more about Shadcn UI and all the features it offers in my blog.

Installing & Configuring Shadcn UI in Your Project

You can use Shadcn UI in all major React frameworks like Vite, Next.js, Remix, Gatsby, and Astro. Also, it supports Laravel out of the box. For this blog, we will focus on Next.js. However, the installation steps are similar to all other frameworks. You can find the detailed installation guide here.

Step 1: Installing Shadcn UI

1. Open your terminal and navigate to your project's root directory.
2. Run the following command:

npx shadcn-ui@latest init

Note: If you don't have a Next.js project, the CLI will offer to create one for you.

Step 2: Configuring Shadcn UI

The CLI will ask you three questions to set up Shadcn UI:

Prompt 1: Choose Your Style:

Shadcn UI offers two main style options: Default and New York. We can change styles later if we want.

1. Default: This is the classic Shadcn UI look. The main characteristics are:

   • Larger input fields
   • Uses lucide-react icons
   • Animations with tailwindcss-animate

2. New York: An alternative style with a slightly different aesthetic. The main characteristics are:

   • Smaller buttons
   • Cards with shadows
   • Uses Radix Icons

Prompt 2: Select a Base Color

This option allows you to choose a primary color for your UI. The base color influences the overall color scheme of your components. It will be used for primary actions, highlights, and to generate a harmonious color palette for your UI.

Options include Neutral, Grey, Zinc, Stone, Slate, and more.

Prompt 3: Decide on CSS Color Variables

This question is about how you want to implement colors in your project

• If you choose Yes, then it uses CSS Variables for colors. This has several benefits over the other option. A few advantages include:
  • Easier global color changes
  • Supports theme switching
  • More flexible for dynamic theming
  • Example: var(--primary-color) in CSS
• However, if you choose No, it uses the default Tailwind CSS classes inside the component.
  • Simpler if you don't need dynamic theming
  • Potentially slightly more performant
  • Example: bg-blue-500 in JSX

I suggest using Yes, as it allows you more flexibility to change color configuration later.

After answering these questions, the CLI will create the necessary files and folders, update your tailwind.config.js, and add a components.json file to your project root

The components.json file contains Shadcn UI configuration. It is useful when you add new components via CLI. If you plan to manually copy-paste components into your codebase, you don’t need this file.

How to Install a Shadcn Button in Next.js Project?

There are two ways to add components. Either you can use the CLI or copy-paste the code from its documentation. We will see how to use CLI to install Shadcn UI components in your Next.js project.

Execute the following command in the terminal.

npx shadcn-ui@latest add button

Replace button with any component name you want to add. You can see the whole list of components here.

This command creates a file called button.tsx inside componetns/ui. Now you can use it just like any other component you wrote. Here’s how you can use it inside your code.

import { Button } from '@/components/ui/button';

export default function LogOut() {
	return (
		<Button size='sm' variant='destructive'>
			Log out
		</Button>
	);
}

Notice how the button was imported directly from your project's source directory rather than from a library. When you open the Button.tsx file, you will notice that it is simply another component that accepts props and renders a UI. You can modify the props it accepts, the style it uses, and the way it renders a component.

Furthermore, if you provide a className prop and pass down CSS classes, it will overwrite any existing classes.

Here’s an example of how you can use various props and override the class names of the component:

export default function Home() {
	return (
		<main className='flex flex-col items-center justify-center gap-4 min-h-screen'>
			<Button variant='default' size='lg'>
				Default button
			</Button>
			<Button variant='destructive' size='lg'>
				Destructive button
			</Button>
			<Button variant='secondary' size='lg'>
				A secondary button
			</Button>
			<Button variant='outline' size='default'>
				Button with outline
			</Button>
			<Button variant='link' size='lg'>
				A button that looks like a link
			</Button>
			<Button variant='ghost' size='sm'>
				Almost disabled button
			</Button>
			<Button className='bg-purple-500 text-lg font-serif'>
				Button with custom styles
			</Button>
		</main>
	);
}

Here’s an example of Shadcn default button component:

How to Modify Existing Styles of Shadcn UI Components?

As the code lives inside your codebase itself, it’s extremely easy to change the look and feel of the components. Let’s add two more variants to the button component.

Open the Button.tsx in IDE. You will find it inside /components/ui directory.

You’ll see buttonVariants in the file. It stores the result of calling the cva function. cva(), imported from class-variance-authority (CVA) helps manage complex, variant-based styling for components in a declarative way. You can make customize your component by adding/removing the values passed to this function.

const buttonVariants = cva('<default-classes>', {
	variants: {
		variant: {
			warning: 'bg-yellow-500 hover:bg-yellow-500/90',
			success: 'bg-green-500 text-secondary-foreground hover:bg-green-500/90',
			/* other code */
		},
		/* other code */
	},
	/* other code */
});

Now, use warning and success as prop values for the button:

<Button variant="warning">Custom warning button</Button>
<Button variant="success">Custom success button</Button>

This is how these custom warning and success button will look like:

How to Change the Theme of Shadcn UI Components?

While configuring, Shadcn UI creates a default theme and saves it inside the global CSS file. If you selected “Yes” for the third prompt about using CSS variables, you can modify the theme afterward. Let’s quickly see how to do so.

Go to ui.shadcn.com/themes and click on Customize. Here you can change the default style (default and New York), base color, border radius, and theme mode (light or dark). Once done, click on Copy code.

Now go to your global CSS file (could vary on which framework you’re using), and replace the previous code with the newly copied code. The changes must be applied with just a hot refresh — without needing to restart the server!

Wrapping Up

In this blog, we learned how to install and configure Shadcn UI for your project. We also explored how to install and modify components and change the default style as well.

Have you used Shadcn UI in your side projects? How was your experience? Or do you use something else to build your own component library? I would love to know. Feel free to reach out to me on Peerlist or Twitter to share your thoughts.

And if you are looking for a Frontend Developer Jobs, you will find many good opportunities on Peerlist Jobs. Don't forget to check them out.

Until then, keep building! 👨‍💻