Exploring Next.js with ShadCN UI and Tailwind CSS

Posted on July 6, 2024 by

Introduction

In this article, I will share my experience working with Next.js, ShadCN UI, and Tailwind CSS. Combining these technologies allows for a powerful, flexible, and visually appealing web application.

Setting Up the Project

First, we need to set up our Next.js project. If you haven`'`t already, you can create a new Next.js application by running the following command:

npx create-next-app@latest my-nextjs-app

After setting up the project, navigate to the project directory:

cd my-nextjs-app

Installing ShadCN UI and Tailwind CSS

Next, let`'`s install ShadCN UI and Tailwind CSS. Run the following commands to add these dependencies:

npm install shadcn-ui tailwindcss
npx tailwindcss init

Configure Tailwind CSS by editing the tailwind.config.js file:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a styles/globals.css file and add the following lines to include Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Creating a ShadCN UI Component

Now, let`'`s create a simple ShadCN UI component. Create a new file components/Button.tsx and add the following code:

import React from 'react';

const MyButton = ({ children }) => {
  return (
    <Button className="bg-blue-500 text-white px-4 py-2 rounded-xl hover:bg-blue-600">
      {children}
    </Button>
  );
};

export default MyButton;

Using the Button Component

To use the button component, import it into your page and include it in the JSX. For example, update pages/index.tsx to use the button:

import React from 'react';
import MyButton from '../components/Button';

const Home = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <MyButton>Click Me</MyButton>
    </div>
  );
};

export default Home;

Conclusion

Integrating Next.js with ShadCN UI and Tailwind CSS provides a seamless development experience. It allows for creating beautiful and responsive web applications with minimal effort. I hope this article gives you a good starting point for your Next.js projects.