Tailwind CSS Modal/Dialog
David UI's Modal component offers a sleek and accessible way to display overlays for alerts, forms, or additional content. Styled with Tailwind CSS, it supports customizable headers and footers for a polished user experience.
Explore our responsive Modal component examples, styled with Tailwind CSS, ideal for creating engaging web or mobile interfaces.
Basic Modal
This example showcases how to create a Tailwind CSS modal with a structured layout, including a header, dismiss button, and action buttons.
Modal Sizes
David UI's dialog component is versatile and it is coming with multiple size options (xs, sm, md, lg, xl, screen). Each size adapts seamlessly to fit diverse content requirements, ensuring responsiveness and consistent styling across applications.
Modal with Form
Try this example of the Dialog component for creating a sign-in form. Includes input fields for email and password, a "Remember Me" checkbox, and actionable buttons.
Modal with Image
A visually rich example of a Dialog component integrated with images. Includes features like a user profile section, image display, action buttons for downloading or sharing, and metrics for views and downloads. Ideal for image galleries or media-rich applications.
Web 3 Modal
Here is an example of how to create a wallet connection dialog for Web3 applications. It features popular wallet options like MetaMask, Coinbase, and Trust Wallet, presented with clear actions and helpful contextual information for users new to Ethereum wallets.
Long Modal
This example showcases a Dialog component designed for handling large amounts of text content. Ideal for lengthy messages, agreements, or detailed information. Includes a scrollable area for improved usability, along with dismiss and confirmation buttons.
Message Modal
A Dialog component tailored for sending messages. Includes input fields for username and message, providing a clean interface for direct communication. Perfect for chat or messaging functionalities.
Modal Notification
A focused example of a notification-style Dialog component. Designed to grab the user's attention, it combines an icon, concise messaging, and actionable buttons to deliver critical information or alerts effectively.
Required Script
The Modal component in david-ai requires JavaScript to handle the modal functionality. The library provides smooth transitions and toggle behavior through data attributes.
Installation
To use the Modal component in your project, you first need to install the david-ai library via npm:
Basic Usage
Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initModal:
Using with CDN
You can include david-ai via a CDN and initialize modal functionality globally in the browser. Add the following script to your HTML file:
