Setup shadcn-ui with Payload CMS | Tips & Tricks

Welcome to another insightful article from AllAboutPayload, your go-to source for all things related to Payload CMS. Today, we're diving into the integration of shadcn-ui with Payload NextJS. This guide will help you navigate the setup process and troubleshoot common issues, particularly around style overwriting.

This article is the written step-by-step companion to our video tutorial available on YouTube: Setup shadcn-ui with Payload CMS | Video Guide. For visual learners or those who prefer following along with video instruction, the video covers the same content but offers additional context and real-time demonstrations of each step in the process.

Table of Contents

• Prerequisites: Tailwind CSS Setup
• Installation Options for shadcn-ui
• Installing shadcn-ui
• Installing Required Components
• Finalizing the Setup
• Conclusion
• FAQs

Prerequisites: Tailwind CSS Setup

Before we begin, it's essential that you have the Tailwind CSS setup completed. If you haven't done that yet, I highly recommend checking out our previous video on integrating Tailwind CSS with Payload. Without this foundation, setting up shadcn-ui will not work correctly.

Installation Options for shadcn-ui

There are two primary methods for installing shadcn-ui: a manual installation or using a Command Line Interface (CLI) tool. In this article, we will focus on the CLI method, as it simplifies the process significantly.

Setting Up Import Alias

Before we can properly integrate shadcn-ui, we need to set up an import alias. This is crucial because shadcn-ui utilizes a specific import pattern (e.g., @/component) that doesn't function out of the box.

To create this import alias, follow these steps:

1. Open your tsconfig.json file.
2. Locate the paths attribute and add the following line: "@/*": ["src/*"]. This will redirect all imports that use the @ symbol to the source folder.

Next, you will need to adjust your webpack configuration in the payload.config.ts file:

1. Find the section under admin and webpack.
2. Under resolve, add an alias entry for @ that points to the same path.

Although this should theoretically be sufficient, we will also need to install a third-party library called tsconfigpaths to ensure that the import alias works correctly.

Installing tsconfigpaths

To install the required library, run:

npm install tsconfigpaths

Once installed, go back to your tsconfig.json file and require this library under the ts-node section.

Testing the Import Alias

Let's test whether our import alias is working. Create a new component called test.jsx and attempt to import it using the @ symbol:

import Test from '@/components/test';

If everything is set up correctly, your server should restart without any issues, and the component should display correctly.

Installing shadcn-ui

Now that we have our import alias set up, it's time to install shadcn-ui. Use the following command:

npx shadcn-ui@latest init

This command will prompt you with a series of questions. You can customize your configuration, but here’s a quick overview of what I chose:

• Language: JavaScript
• Base Color: Slate
• Global CSS File: tailwind.css
• CSS Variables: Yes

Configuring Import Aliases for Components

During the installation, you’ll also need to specify where your components will be stored. I recommend creating a folder named shadcn-ui within your components directory. Use the following syntax:

@shadcn-ui/components

You can also set up aliases for utilities:

@shadcn-ui/utils

Installing Required Components

To display a data table in your Payload admin panel, we need to install the table component along with other necessary components.

npx shadcn-ui@latest add

This command will allow you to select various components. For this example, we will need:

• Button
• Checkbox
• Dropdown Menu
• Input
• Pagination

Creating the Table Component

Once all components are installed, create a new file called chat-table.jsx. Here’s how you can implement it:

1. Copy the demo code from the shadcn-ui documentation.
2. Rename the export to ChatTable.
3. Ensure you remove any TypeScript-specific code if you're using JavaScript.

Finalizing the Setup

After creating the table component, don't forget to import it into your payload.config.ts file and restart your server. If everything is set up correctly, you should see your data table displayed in the admin panel.

However, you may encounter some issues with the appearance of the table. This is due to style conflicts between Tailwind CSS and shadcn-ui. Let's address these:

Addressing Style Conflicts

One common issue is that the save button may not appear unless you hover over it. This is usually caused by Tailwind CSS styles overwriting shadcn-ui styles.

To resolve this, you should comment out the base import of Tailwind components in your configuration. This can help restore some of the default styles that shadcn-ui relies on.

Using Tailwind CSS Scoped Preflight

For a more robust solution, consider using a package called Tailwind CSS Scoped Preflight. This package allows you to selectively apply Tailwind's preflight styles, preventing unwanted overwrites.

To install this package, run:

npm install tailwindcss-scoped-preflight

Then, import it in your Tailwind configuration and specify which CSS selectors should be included or excluded from the preflight check.

Conclusion

Integrating shadcn-ui with Payload NextJS can enhance your admin panel significantly, but it does come with its challenges, particularly concerning style conflicts. By following the steps outlined in this article, you should be well-equipped to set up shadcn-ui and troubleshoot any issues that arise.

If you have any questions or need further assistance, feel free to leave a comment below. We appreciate your feedback and are always looking for ways to improve our content!

FAQs

What is Payload NextJS?

Payload NextJS is a headless CMS built on Next.js, providing a flexible and powerful backend for modern web applications.

How do I install shadcn-ui?

You can install shadcn-ui using the CLI with the command npx shadcn-ui@latest init.

What are the common issues when integrating shadcn-ui?

Common issues include style conflicts between Tailwind CSS and shadcn-ui, particularly with component visibility and layout.

Where can I find more resources on Payload CMS?

Visit the Payload CMS website for documentation and additional resources.