How to create a generic Dialog component in TailwindCSS that takes in title, description, etc. as props?

question tailwindcss front-end
Ram Patra Published on February 23, 2024

If you want to create a separate, generic Dialog component where you can pass in the title and description as props, you can do so by defining a reusable Dialog component. You can even pass HTML content in the description of the Dialog component, you can do so by utilizing React’s dangerouslySetInnerHTML attribute. Here’s how you can achieve this:

  1. Create a Generic Dialog Component:

    // Dialog.js
    import React from 'react';
    import { Dialog } from '@headlessui/react';
    function CustomDialog({ title, description, isOpen, onClose }) {
      return (
        <Dialog open={isOpen} onClose={onClose}>
          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4">
              <div dangerouslySetInnerHTML= />
            <button onClick={onClose}>Close</button>
    export default CustomDialog;
  2. Use the Generic Dialog Component:

    // Example.js
    import React, { Fragment, useState } from 'react';
    import CustomDialog from './Dialog';
    function Example() {
      const [isOpen, setIsOpen] = useState(false);
      return (
          <button onClick={() => setIsOpen(true)}>Open Dialog</button>
            onClose={() => setIsOpen(false)}
            title="Dialog Title"
            description="<p>This is the <strong>content</strong> of the dialog.</p>"
    export default Example;

Inside the CustomDialog component, we use dangerouslySetInnerHTML to render the HTML content safely. However, please be cautious when using dangerouslySetInnerHTML as it can expose your application to cross-site scripting (XSS) attacks if not used carefully. Make sure that you trust the source of the HTML content or sanitize it properly before rendering.

Ram Patra Published on February 23, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question front-end tailwindcss February 17, 2024 How to center an element using Tailwind CSS?

In Tailwind CSS, you can center an element using flexbox utilities directly in your HTML markup. Here’s how you can center an element horizontally and vertically: