How to Add Shadcn Components into an Existing Next.js Template

We recently received an email from a user of our Tailwind CSS templates asking: “Hi Cruip Team, thanks so much for those great templates. […] I want to add some components from the Shadcn library, and with the Tailwind, JSON, and TypeScript module set up for the Stellar template […]. Could you give me some advice or a tutorial on how to add components (either manually or via npm)? Thanks again!”.

For those unfamiliar, Shadcn is a popular open-source repository of components designed for modern React application development. People love these components for their clean style, strong focus on accessibility, and for the flexibility and control they can have in terms of customization. Each component comes with built-in functionality, allowing developers to focus on adapting the style to their own design. Though not explicitly mentioned in the documentation, most of these components are based on Radix primitives – in simpler terms, Shadcn components act as a styling layer on top of Radix UI by leveraging Tailwind CSS.

We’ve been fans of the Shadcn project for a while now and have used their components in the past. However, we never got around to testing how to import these components into our templates until we received the email mentioned above. This gave us the opportunity to write a guide on how to add Shadcn components to our templates built on Next.js Tailwind CSS.

The setup process is pretty simple. Just run the command npx shadcn-ui@latest init in your terminal, and you’ll be prompted with a series of questions. Just answer them accordingly:

• Would you like to use TypeScript (recommended)? yes
• Which style would you like to use? › Default
• Which color would you like to use as base color? › (Choose the shade of gray used in the current template)
• Where is your global CSS file? › app/css/style.css
• Do you want to use CSS variables for colors? › no
• Are you using a custom tailwind prefix eg. tw-? (Leave blank)
• Where is your tailwind.config.js located? › tailwind.config.js
• Configure the import alias for components: › @/components
• Configure the import alias for utils: › @/lib/utils
• Are you using React Server Components? › yes

The installation generates a components.json file in the root of your application. However, it will also make changes to certain files in the current project – i.e. style.css and tailwind.config.json – breaking the template’s style. To prevent this, we must ensure to:

• Revert style.css to its original version.
• Merge the contents of the Tailwind configuration file before and after Shadcn. Keep in mind that Shadcn generates a new tailwind.config.js file, so you should copy the missing sections from this file into the original tailwind.config.ts. Once you’ve done that, you can safely delete tailwind.config.js from your project.

Now, you can add the components to your Cruip template as you would normally do. For example, to import the modal component, run npx shadcn-ui@latest add dialog in the terminal to generate the component file inside the components/ui folder.

We hope this brief guide is helpful to you. We value your feedback, so please let us know if you would also like to see Shadcn used in our Tailwind CSS templates!