Summary

This article provides a tutorial on how to use the dialog component from the Shadcn/ui library in a Next.js application.

Abstract

The author begins by expressing their appreciation for the Shadcn/ui library, which has made frontend development easier by providing a variety of beautiful components. The article focuses on the dialog component, which is defined as a window overlaid on either the primary window or another dialog window, rendering the content underneath inert. The tutorial covers the installation of Next.js v14, TailwindCss, and the Shadcn/ui library, as well as the installation of the dialog, button, and card components. The author then demonstrates how to create a Dialog Component file, customize the trigger, and make the dialog component global in the application using the Zustand state management library. The article concludes with the creation of a ModalProvider component for clean and scalable code.

Opinions

The author was not a fan of UI libraries until they started using Shadcn UI.
Shadcn/ui has made life easier for developers by providing a number of different types of beautiful components.
The author finds working with some aspects of new technology, such as Shadcn/ui, can be tricky, but this is normal.
The author recommends using Zustand for state management in a Next.js application.
The author suggests creating a ModalProvider component for clean and scalable code.
The author plans to post more about using Shadcn/ui in front-end development.
The author recommends trying out the AI service ZAI.chat, which provides the same performance and functions as ChatGPT Plus(GPT-4) but is more cost-effective.

Mastering Dialog Components in Shadcn/ui Library

I wasn’t a fan of UI libraries until I started using Shadcn UI. It has gathered a lot of attention over the past few months, but how stress-free it is making frontend developers experience. It is so flexible and offers a number of different types of beautiful components; now I don't need to bother myself with hand-coding some components like dialog, select, dropdown, tabs, and the like. Shadcn/ui truly has made life easier for developers.

Like every other new technology, working through some aspects can be tricky, which is normal, which is why I want to break down how to work with a specific shadcn/ui component, which is the dialog.

Dialog can be defined as a window overlaid on either the primary window or another dialog window, rendering the content underneath inert. This definition is from Shadcn/ui Docs. Dialog can be basically seen as a MODAL component.

https://res.cloudinary.com/dnir0cslk/video/upload/v1704267533/Create_Next_App_-_Google_Chrome_2024-01-03_08-35-25_eqxeka.mp4

So let us now go to the practical aspect of it:

For this article, we are going to use Nextjs and Shadcn/ui.

Firstly, we are going to install Nextjs v14 and TailwindCss. It is worth noting that shadcn/ui components are built upon TailwindCss. Run the command below:

Run the command: npx create-next-app@latest my-app — typescript — tailwind — eslint

Then, after installing Nextjs, we are going to go through the installation of the shadcn/ui library in our application.

Run the command: npx shadcn-ui@latest init

use these configuration for your `components.json`

After executing the above, we are going to install the shadcn/ui components we will need for this particular lesson. I will be using dialog, button and card components.

Run the following command to install them: npx shadcn-ui@latest add dialog button card

Now is time to create our Dialog Component file,

This is the initial code for our component. Now we are going to customize the trigger and make the dialog component global in our application. We need to install zustand for state management.

then create a hooks folder, create a file, useDialog.ts, and write the following code:

This will control the state of the dialog component, and you will see how we are going to add the hook to the component.

You can see I have removed the default DialogTrigger from the shadcn UI, the hook is what triggers the Dialog component. This is very helpful, especially when the modal is needed on various pages of the application. You also need to create a file component named ModalProvider.tsx so that you can add all your dialog components there for clean and scalable code.

You can also this method in another shadcn/ui component called Alert Dialog

Result of the code:

I hope this helps you to navigate your way around dialog components in shadcn/ui. I will post more about using shadcn/ui in front-end development. I’ll be waiting for recommendations and feedback. Thank you, and I hope you enjoy it.

Peace.

Ezigbo ❤