Next.js

Next.js + Tailwind CSS + shadcn/ui

In this document, we will evaluate the UI component library shadcn/ui, which has been gaining attention recently. shadcn/ui offers a wide range of customizable components and is not provided as an npm package, making it easy to use.

The main benefits are as follows:

In this document, we will evaluate its use as a Pages Router based on a Next.js project.

Create a Project

First, let’s create a Next.js project. Refer to the following page for the steps.

Let’s create the project right away.

Image
sh
Image

Check the files that have changed after initialization.

package.json

Now we are ready.

Add Components

Let’s add some components right away.

Button

Add the button as described in the installation steps.

sh

Check the project updates as follows.

The component is now available. We updated the top page as follows.

src/pages/index.tsx

The button is now displayed.

Image

For more detailed usage of the Button, refer to the following page.

Next, let’s add a Carousel, which is often used for practice when creating websites.

sh

A question will be displayed asking if you want to overwrite button.tsx.

Image

Select overwrite, and the project update will be completed. Check the changes as follows.

shadcn/ui’s Carousel uses embla-carousel-react. The official site of this package is as follows.

Place the created component on the top page as before.

src/pages/index.tsx

The actual operation is as follows.

Image

For more detailed usage of the Carousel, refer to the following page.

Summary

This time, we introduced only Button and Carousel, but various UIs are available, making it easier to use components for your site.

The Next.js project introduced here is published in the following repository.

References