Modal

Modal dialog for focusing user attention on important content.

import { Modal, Button } from "ui-lab-components";
import { useState } from "react";
 
export function Example() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>
      <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
        <Modal.Header>Modal Title</Modal.Header>
        <Modal.Body>Modal content goes here</Modal.Body>
      </Modal>
    </>
  );
}

Basic Modal

A simple modal dialog with a trigger button. Use this for important user interactions that require focused attention.

'use client';
 
import React from 'react';
import { Modal, Button } from 'ui-lab-components';
 
export default function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
 
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
        <Modal.Header>Modal Title</Modal.Header>
        <Modal.Body>This is the modal content. It displays important information or actions.</Modal.Body>
        <Modal.Footer>Modal Footer</Modal.Footer>
      </Modal>
    </>
  );
}
UI Lab