ComponentsCore

Modal

An element that overlays the main content of a webpage, requiring user interaction before returning to the underlying page.

Example

Features

The HTML <dialog> element can be used to build dialogs. However, it is not yet widely supported across browsers, and building fully accessible custom dialogs from scratch is very difficult and error prone. Dialog helps achieve accessible dialogs that can be styled as needed.

  • Flexible – Dialogs can be used within a Modal or Popover to create many types of overlay elements.
  • Accessible – Exposed to assistive technology as a dialog or alertdialog with ARIA. The dialog is automatically labeled by a nested <Heading> element. Content outside the dialog is hidden from assistive technologies while it is open.
  • Focus management – Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/modal.tsx
npx @libravelui@latest add modal

Anatomy

import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  ModalClose,
  ModalTrigger,
} from "@/components/ui/core/modal";
<Modal>
  <ModalTrigger>Open</ModalTrigger>
  <ModalContent blurred>
    <ModalHeader title="Title here" description="Description here" />
    <ModalBody className="px-2">Body content belongs here</ModalBody>
    <ModalFooter>
      <ModalClose />
      <Button>Action Here</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

Another Examples

Sizes

A collection of modals demonstrating different sizes, each with a header, body, and footer. The content adapts to the modal’s dimensions while keeping layout and spacing consistent.

Props

Loading types…

Edit on GitHub

Dock

A dock for displaying supplementary content alongside the main interface without interrupting the user’s primary workflow.

Popover

A popover is a floating overlay element that appears next to a trigger element, providing additional contextual information or actions without navigating away from the current page.