Blog post

Shadcn and Next.js: Tailoring UI Components to Your Project's Needs

In the past, I've utilized various component libraries, including MUI, Chakra UI, Bootstrap, Next UI, and Tailwind UI. While I've consistently found them to be reliable and easy to use, one significant drawback has always nagged at me: limited customization options and unnecessary bloat from downloading entire packages with components that often go unused.

Enter Shadcn, an open-source component library that has truly transformed my approach to working with components.

So, what's all the hype about?

For me, it's the ability to install only what you need and enjoy full customization capabilities.

Imagine needing just a button. No problem – install the button component, and you're all set! Need to customize the button? Dive into the UI folder, locate the button, and tweak it to your heart's content.

Furthermore, Shadcn offers pre-made themes and a convenient dark/light mode out of the box.

For a live demonstration of Shadcn in action, look no further than this very blog website, which I constructed entirely using Shadcn with remarkable ease. To streamline the process even further, I employed an AI tool called v0, akin to ChatGPT but tailored for components. Simply describe what you need – say, a form with username and password fields and a submit button – and it generates the necessary code for seamless integration into your application.

See below the finished product from v0

And here is the code:

npx v0 add NkBUGndCQB2

import {
  CardTitle,
  CardDescription,
  CardHeader,
  CardContent,
  CardFooter,
  Card,
} from "@/components/ui/card";
import {
  Label
} from "@/components/ui/label";
import {
  Input
} from "@/components/ui/input";
import {
  Button
} from "@/components/ui/button";

<Card className="my-14 max-w-2xl mx-auto">
<CardHeader>
  <CardTitle className="text-2xl">
    Login
  </CardTitle>
  <CardDescription>
    Enter your email below
    to login to your account.
  </CardDescription>
</CardHeader>
<CardContent className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="email">Email</Label>
    <Input
      id="email"
      placeholder="m@example.com"
      required
      type="email"
    />
  </div>
  <div className="space-y-2">
    <Label htmlFor="password">
      Password
    </Label>
    <Input
      id="password"
      placeholder="Password"
      required
      type="password"
    />
  </div>
</CardContent>
<CardFooter>
  <Button className="w-full">
    Sign in
  </Button>
</CardFooter>
</Card>

I'm now going to take you through the steps to getting Shadcn installed with Next.js.

How to install with Next.js

So let's get into the crux of it, how to install lottie files with Next.js, we will go through the steps from start to finish and get you started with your first lottie animations.

I would suggest using visual studio code as your coding IDE and also make sure you have the latest version of node installed

Step 1. Install Next.js

Inside Visual Studio code open up your terminal and type the command below to install Next.js

npx create-next-app@latest

The terminal will give you some prompts in order to enable features such as Tailwind CSS and TypeScript. Below are the settings I used for this example.

√ What is your project named? ... lottie-animation
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ 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"

Now, let's navigate to the folder where we'll be working. You can do this by either going to 'File' > 'Open Folder' and selecting the project we're working on, or you can use the following commands to navigate to the folder:

cd lottie-animation

Now, let's install the npm packages we need

npm install

Step 2. Install Shadcn

You'll need to run the NPM command to install Shadcn

npx shadcn-ui@latest init

You will be asked some questions about the installation, here are the settings I used:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? ›  yes

Step 3. Let's add some UI components

We are now going to add a button to our document

npx shadcn-ui@latest add button

inside your page.tsx add this code

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Upon inspecting your folder structure, you'll notice the addition of a "ui" folder, with "button.tsx" now present. This indicates the successful installation of that particular component.

Step 4. Let's run the application

If all went well we can now run the command to start the server

npm run dev

Success you have now implimented your first shadcn component! it should look like the button above, for more components please visit the Shadcn documentation location here