CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nextui-org--react

Beautiful and modern React UI library with comprehensive components, theming, and accessibility support.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

overlays.mddocs/

Overlay Components

NextUI provides comprehensive overlay components for creating modal dialogs, popovers, dropdowns, and drawers with advanced positioning, animation, and interaction capabilities.

Capabilities

Modal

A flexible modal dialog component with customizable backdrop, scrolling behavior, and animations for displaying content above the main interface.

interface ModalProps {
  /** Modal content */
  children: React.ReactNode;
  /** Modal size */
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
  /** Border radius */
  radius?: "none" | "sm" | "md" | "lg";
  /** Shadow intensity */
  shadow?: "sm" | "md" | "lg";
  /** Backdrop style */
  backdrop?: "transparent" | "opaque" | "blur";
  /** Scrolling behavior */
  scrollBehavior?: "inside" | "outside";
  /** Modal placement */
  placement?: "auto" | "top" | "center" | "bottom";
  /** Whether modal is open */
  isOpen?: boolean;
  /** Default open state */
  defaultOpen?: boolean;
  /** Whether modal can be dismissed */
  isDismissable?: boolean;
  /** Whether keyboard dismiss is disabled */
  isKeyboardDismissDisabled?: boolean;
  /** Hide close button */
  hideCloseButton?: boolean;
  /** Block scroll on body */
  shouldBlockScroll?: boolean;
  /** Portal container */
  portalContainer?: Element;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Motion configuration */
  motionProps?: MotionProps;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<ModalSlots>;
  /** Open change handler */
  onOpenChange?: (isOpen: boolean) => void;
  /** Close handler */
  onClose?: () => void;
}

type ModalSlots = 
  | "wrapper" | "backdrop" | "base" | "header" | "body" 
  | "footer" | "closeButton";

function Modal(props: ModalProps): JSX.Element;

/**
 * Hook for Modal state management
 */
function useModal(props: ModalProps): {
  Component: React.ElementType;
  slots: Record<ModalSlots, string>;
  classNames: SlotsToClasses<ModalSlots>;
  isOpen: boolean;
  onClose: () => void;
  getModalProps: () => any;
  getBackdropProps: () => any;
  getDialogProps: () => any;
};

Modal Structure Components

Components for organizing modal content with proper accessibility and styling.

interface ModalContentProps {
  /** Modal content sections */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

interface ModalHeaderProps {
  /** Header content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

interface ModalBodyProps {
  /** Body content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

interface ModalFooterProps {
  /** Footer content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

function ModalContent(props: ModalContentProps): JSX.Element;
function ModalHeader(props: ModalHeaderProps): JSX.Element;
function ModalBody(props: ModalBodyProps): JSX.Element;
function ModalFooter(props: ModalFooterProps): JSX.Element;

Modal Usage Example:

import { 
  Modal, ModalContent, ModalHeader, ModalBody, ModalFooter,
  Button, Input, Checkbox, Link
} from "@nextui-org/react";
import { useDisclosure } from "@nextui-org/react";

function ModalExample() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  return (
    <>
      <Button onPress={onOpen} color="primary">
        Open Modal
      </Button>
      <Modal 
        isOpen={isOpen} 
        onOpenChange={onOpenChange}
        placement="top-center"
        backdrop="blur"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">
                Log in
              </ModalHeader>
              <ModalBody>
                <Input
                  autoFocus
                  label="Email"
                  placeholder="Enter your email"
                  variant="bordered"
                />
                <Input
                  label="Password"
                  placeholder="Enter your password"
                  type="password"
                  variant="bordered"
                />
                <div className="flex py-2 px-1 justify-between">
                  <Checkbox
                    classNames={{
                      label: "text-small",
                    }}
                  >
                    Remember me
                  </Checkbox>
                  <Link color="primary" href="#" size="sm">
                    Forgot password?
                  </Link>
                </div>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="flat" onPress={onClose}>
                  Close
                </Button>
                <Button color="primary" onPress={onClose}>
                  Sign in
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}

Modal Context

Context system for sharing modal state across modal components.

interface ModalProviderProps {
  children: React.ReactNode;
  value: ModalContextValue;
}

interface ModalContextValue {
  slots: Record<ModalSlots, string>;
  classNames?: SlotsToClasses<ModalSlots>;
  isOpen?: boolean;
  backdrop?: string;
  hideCloseButton?: boolean;
  motionProps?: MotionProps;
  onClose?: () => void;
}

const ModalProvider: React.FC<ModalProviderProps>;

/**
 * Hook to access modal context
 * @throws Error if used outside ModalProvider
 */
function useModalContext(): ModalContextValue;

Popover

A floating content container that appears relative to a trigger element with flexible positioning and content options.

interface PopoverProps {
  /** Popover content including trigger and content */
  children: React.ReactNode;
  /** Popover size */
  size?: "sm" | "md" | "lg";
  /** Color theme */
  color?: "default" | "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Border radius */
  radius?: "none" | "sm" | "md" | "lg" | "full";
  /** Shadow intensity */
  shadow?: "sm" | "md" | "lg";
  /** Backdrop style */
  backdrop?: "transparent" | "opaque" | "blur";
  /** Popover placement */
  placement?: Placement;
  /** Whether popover is open */
  isOpen?: boolean;
  /** Default open state */
  defaultOpen?: boolean;
  /** Whether popover should flip to fit */
  shouldFlip?: boolean;
  /** Whether to update position on scroll */
  shouldUpdatePosition?: boolean;
  /** Block scroll on body */
  shouldBlockScroll?: boolean;
  /** Whether popover can be dismissed */
  isDismissable?: boolean;
  /** Whether to close on blur */
  shouldCloseOnBlur?: boolean;
  /** Custom interact outside handler */
  shouldCloseOnInteractOutside?: (element: Element) => boolean;
  /** Whether keyboard dismiss is disabled */
  isKeyboardDismissDisabled?: boolean;
  /** Show arrow pointer */
  showArrow?: boolean;
  /** Offset from target */
  offset?: number;
  /** Cross-axis offset */
  crossOffset?: number;
  /** Container padding for flip calculations */
  containerPadding?: number;
  /** Trigger element ref */
  triggerRef?: React.RefObject<Element>;
  /** Scroll container ref */
  scrollRef?: React.RefObject<Element>;
  /** Portal container */
  portalContainer?: Element;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Motion configuration */
  motionProps?: MotionProps;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<PopoverSlots>;
  /** Open change handler */
  onOpenChange?: (isOpen: boolean) => void;
}

type PopoverSlots = "base" | "trigger" | "backdrop" | "arrow" | "content";

function Popover(props: PopoverProps): JSX.Element;

/**
 * Hook for Popover state management
 */
function usePopover(props: PopoverProps): {
  Component: React.ElementType;
  state: OverlayTriggerState;
  slots: Record<PopoverSlots, string>;
  classNames: SlotsToClasses<PopoverSlots>;
  isOpen: boolean;
  getPopoverProps: () => any;
  getTriggerProps: () => any;
  getContentProps: () => any;
};

Popover Structure Components

Components for organizing popover content and trigger elements.

interface PopoverTriggerProps {
  /** Trigger element */
  children: React.ReactElement;
}

interface PopoverContentProps {
  /** Popover content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

function PopoverTrigger(props: PopoverTriggerProps): JSX.Element;
function PopoverContent(props: PopoverContentProps): JSX.Element;

Popover Usage Examples:

import { 
  Popover, PopoverTrigger, PopoverContent,
  Button, Input, Card, CardBody, CardHeader
} from "@nextui-org/react";

function PopoverExamples() {
  return (
    <div className="space-y-4">
      {/* Basic popover */}
      <Popover placement="bottom" showArrow={true}>
        <PopoverTrigger>
          <Button>Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
          <div className="px-1 py-2">
            <div className="text-small font-bold">Popover Content</div>
            <div className="text-tiny">This is the popover content</div>
          </div>
        </PopoverContent>
      </Popover>

      {/* Form in popover */}
      <Popover placement="bottom" backdrop="blur">
        <PopoverTrigger>
          <Button color="primary">Quick Action</Button>
        </PopoverTrigger>
        <PopoverContent className="w-[240px]">
          {(titleProps) => (
            <div className="px-1 py-2 w-full">
              <p className="text-small font-bold text-foreground" {...titleProps}>
                Quick Settings
              </p>
              <div className="mt-2 flex flex-col gap-2 w-full">
                <Input label="Name" size="sm" variant="bordered" />
                <Input label="Email" size="sm" variant="bordered" />
                <Button size="sm" color="primary">
                  Save
                </Button>
              </div>
            </div>
          )}
        </PopoverContent>
      </Popover>

      {/* Card in popover */}
      <Popover>
        <PopoverTrigger>
          <Button variant="bordered">Show Details</Button>
        </PopoverTrigger>
        <PopoverContent className="p-0">
          <Card shadow="none" className="max-w-[300px] border-none bg-transparent">
            <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
              <p className="text-tiny uppercase font-bold">Daily Mix</p>
              <small className="text-default-500">12 Tracks</small>
              <h4 className="font-bold text-large">Frontend Radio</h4>
            </CardHeader>
            <CardBody className="overflow-visible py-2">
              <p className="text-small text-default-500">
                The latest tracks from your favorite artists.
              </p>
            </CardBody>
          </Card>
        </PopoverContent>
      </Popover>
    </div>
  );
}

Free Solo Popover

A standalone popover component that doesn't require a trigger wrapper.

interface FreeSoloPopoverProps {
  /** Popover content */
  children: React.ReactNode;
  /** Target element to position relative to */
  triggerRef: React.RefObject<Element>;
  /** Whether popover is open */
  isOpen?: boolean;
  /** Popover placement */
  placement?: Placement;
  /** Show arrow pointer */
  showArrow?: boolean;
  /** Offset from target */
  offset?: number;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<PopoverSlots>;
  /** Open change handler */
  onOpenChange?: (isOpen: boolean) => void;
}

function FreeSoloPopover(props: FreeSoloPopoverProps): JSX.Element;

Popover Context

Context system for sharing popover state across popover components.

interface PopoverProviderProps {
  children: React.ReactNode;
  value: PopoverContextValue;
}

interface PopoverContextValue {
  state: OverlayTriggerState;
  slots: Record<PopoverSlots, string>;
  classNames?: SlotsToClasses<PopoverSlots>;
  showArrow?: boolean;
  backdrop?: string;
  motionProps?: MotionProps;
}

const PopoverProvider: React.FC<PopoverProviderProps>;

/**
 * Hook to access popover context
 * @throws Error if used outside PopoverProvider
 */
function usePopoverContext(): PopoverContextValue;

Dropdown

A composite component combining popover functionality with menu items for creating dropdown menus.

interface DropdownProps {
  /** Dropdown content including trigger and menu */
  children: React.ReactNode;
  /** Dropdown type */
  type?: "menu" | "listbox";
  /** Trigger action */
  trigger?: "press" | "longPress";
  /** Whether dropdown is disabled */
  isDisabled?: boolean;
  /** Close on select */
  closeOnSelect?: boolean;
  /** Whether dropdown should flip to fit */
  shouldFlip?: boolean;
  /** Block scroll on body */
  shouldBlockScroll?: boolean;
  /** Show arrow pointer */
  showArrow?: boolean;
  /** Portal container */
  portalContainer?: Element;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<DropdownSlots>;
}

type DropdownSlots = "base" | "trigger" | "backdrop" | "arrow" | "content";

function Dropdown(props: DropdownProps): JSX.Element;

/**
 * Hook for Dropdown state management
 */
function useDropdown(props: DropdownProps): {
  Component: React.ElementType;
  state: MenuTriggerState;
  slots: Record<DropdownSlots, string>;
  classNames: SlotsToClasses<DropdownSlots>;
  getDropdownProps: () => any;
};

Dropdown Structure Components

Components for organizing dropdown content with trigger and menu items.

interface DropdownTriggerProps {
  /** Trigger element */
  children: React.ReactElement;
}

interface DropdownMenuProps {
  /** Menu items */
  children?: React.ReactNode;
  /** Menu variant */
  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow";
  /** Menu color theme */
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Selection mode */
  selectionMode?: "none" | "single" | "multiple";
  /** Currently selected keys */
  selectedKeys?: Selection;
  /** Default selected keys */
  defaultSelectedKeys?: Selection;
  /** Prevent empty selection */
  disallowEmptySelection?: boolean;
  /** Close on select */
  closeOnSelect?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<MenuSlots>;
  /** Selection change handler */
  onSelectionChange?: (keys: Selection) => void;
  /** Action handler */
  onAction?: (key: React.Key) => void;
  /** Close handler */
  onClose?: () => void;
}

// DropdownItem and DropdownSection are aliases for MenuItem and MenuSection
interface DropdownItemProps {
  /** Item key identifier */
  key?: React.Key;
  /** Item content */
  children?: React.ReactNode;
  /** Item text value */
  textValue?: string;
  /** Item description */
  description?: React.ReactNode;
  /** Item shortcut */
  shortcut?: React.ReactNode;
  /** Start content (icon, etc.) */
  startContent?: React.ReactNode;
  /** End content (icon, badge, etc.) */
  endContent?: React.ReactNode;
  /** Whether item is disabled */
  isDisabled?: boolean;
  /** Whether to show divider after item */
  showDivider?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<MenuItemSlots>;
}

interface DropdownSectionProps {
  /** Section title */
  title?: React.ReactNode;
  /** Section items */
  children?: React.ReactNode;
  /** Whether to hide divider */
  hideDivider?: boolean;
  /** Whether to show divider */
  showDivider?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<MenuSectionSlots>;
}

function DropdownTrigger(props: DropdownTriggerProps): JSX.Element;
function DropdownMenu(props: DropdownMenuProps): JSX.Element;
const DropdownItem: React.FC<DropdownItemProps>;
const DropdownSection: React.FC<DropdownSectionProps>;

Dropdown Usage Examples:

import { 
  Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection,
  Button, Avatar, User
} from "@nextui-org/react";
import { PlusIcon, CopyIcon, EditIcon, DeleteIcon } from "@heroicons/react/24/solid";

function DropdownExamples() {
  return (
    <div className="flex gap-4">
      {/* Basic dropdown */}
      <Dropdown>
        <DropdownTrigger>
          <Button variant="bordered">Actions</Button>
        </DropdownTrigger>
        <DropdownMenu aria-label="Static Actions">
          <DropdownItem key="new">New file</DropdownItem>
          <DropdownItem key="copy">Copy link</DropdownItem>
          <DropdownItem key="edit">Edit file</DropdownItem>
          <DropdownItem key="delete" className="text-danger" color="danger">
            Delete file
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

      {/* Dropdown with icons */}
      <Dropdown>
        <DropdownTrigger>
          <Button isIconOnly variant="light">
            <PlusIcon className="w-4 h-4" />
          </Button>
        </DropdownTrigger>
        <DropdownMenu variant="faded" aria-label="Dropdown menu with icons">
          <DropdownItem
            key="new"
            shortcut="⌘N"
            startContent={<PlusIcon className="w-4 h-4" />}
          >
            New File
          </DropdownItem>
          <DropdownItem
            key="copy"
            shortcut="⌘C"
            startContent={<CopyIcon className="w-4 h-4" />}
          >
            Copy Link
          </DropdownItem>
          <DropdownItem
            key="edit"
            shortcut="⌘⇧E"
            startContent={<EditIcon className="w-4 h-4" />}
          >
            Edit File
          </DropdownItem>
          <DropdownItem
            key="delete"
            className="text-danger"
            color="danger"
            shortcut="⌘⇧D"
            startContent={<DeleteIcon className="w-4 h-4" />}
          >
            Delete File
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

      {/* User dropdown with sections */}
      <Dropdown placement="bottom-start">
        <DropdownTrigger>
          <User
            as="button"
            avatarProps={{
              isBordered: true,
              src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
            }}
            className="transition-transform"
            description="@tonyreichert"
            name="Tony Reichert"
          />
        </DropdownTrigger>
        <DropdownMenu aria-label="User Actions" variant="flat">
          <DropdownItem key="profile" className="h-14 gap-2">
            <p className="font-bold">Signed in as</p>
            <p className="font-bold">@tonyreichert</p>
          </DropdownItem>
          <DropdownItem key="settings">My Settings</DropdownItem>
          <DropdownItem key="team_settings">Team Settings</DropdownItem>
          <DropdownItem key="analytics">Analytics</DropdownItem>
          <DropdownItem key="system">System</DropdownItem>
          <DropdownItem key="configurations">Configurations</DropdownItem>
          <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
          <DropdownItem key="logout" color="danger">
            Log Out
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  );
}

Drawer

A slide-out panel component that extends modal functionality for creating side navigation and content panels.

interface DrawerProps extends Omit<ModalProps, 'placement' | 'size'> {
  /** Drawer placement */
  placement?: "top" | "bottom" | "left" | "right";
  /** Drawer size */
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
  /** Hide overlay backdrop */
  hideOverlay?: boolean;
}

function Drawer(props: DrawerProps): JSX.Element;

/**
 * Hook for Drawer state management
 */
function useDrawer(props: DrawerProps): {
  Component: React.ElementType;
  slots: Record<ModalSlots, string>;
  classNames: SlotsToClasses<ModalSlots>;
  isOpen: boolean;
  onClose: () => void;
  getDrawerProps: () => any;
};

// Drawer structure components are aliases for Modal components
const DrawerContent: React.FC<ModalContentProps>;
const DrawerHeader: React.FC<ModalHeaderProps>;
const DrawerBody: React.FC<ModalBodyProps>;  
const DrawerFooter: React.FC<ModalFooterProps>;

Drawer Usage Example:

import { 
  Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter,
  Button, Link, Listbox, ListboxItem
} from "@nextui-org/react";
import { useDisclosure } from "@nextui-org/react";

function DrawerExample() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  const menuItems = [
    { key: "dashboard", label: "Dashboard" },
    { key: "projects", label: "Projects" },
    { key: "team", label: "Team" },
    { key: "settings", label: "Settings" },
  ];

  return (
    <>
      <Button onPress={onOpen}>Open Drawer</Button>
      <Drawer 
        isOpen={isOpen} 
        onOpenChange={onOpenChange}
        placement="left"
        size="md"
      >
        <DrawerContent>
          {(onClose) => (
            <>
              <DrawerHeader className="flex flex-col gap-1">
                Navigation
              </DrawerHeader>
              <DrawerBody>
                <Listbox 
                  aria-label="Navigation menu"
                  onAction={(key) => {
                    console.log(`Navigate to ${key}`);
                    onClose();
                  }}
                >
                  {menuItems.map((item) => (
                    <ListboxItem key={item.key}>
                      {item.label}
                    </ListboxItem>
                  ))}
                </Listbox>
              </DrawerBody>
              <DrawerFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  Close
                </Button>
                <Link href="/settings" onClick={onClose}>
                  Settings
                </Link>
              </DrawerFooter>
            </>
          )}
        </DrawerContent>
      </Drawer>
    </>
  );
}

Overlay Component Types

// Common overlay types
type OverlaySize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
type OverlayRadius = "none" | "sm" | "md" | "lg";
type OverlayColor = "default" | "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
type BackdropType = "transparent" | "opaque" | "blur";

// Placement for popovers and dropdowns
type PlacementAxis = "top" | "bottom" | "left" | "right";
type PlacementAlign = "start" | "end";
type Placement = PlacementAxis | `${PlacementAxis}-${PlacementAlign}`;

// Modal types
interface ModalState {
  isOpen: boolean;
  size: OverlaySize;
  placement: "auto" | "top" | "center" | "bottom";
  backdrop: BackdropType;
  scrollBehavior: "inside" | "outside";
  isDismissable: boolean;
}

// Popover types  
interface PopoverState {
  isOpen: boolean;
  placement: Placement;
  showArrow: boolean;
  backdrop?: BackdropType;
  shouldFlip: boolean;
  isDismissable: boolean;
}

// Dropdown types
interface DropdownState extends PopoverState {
  selectionMode: "none" | "single" | "multiple";
  selectedKeys: Selection;
  closeOnSelect: boolean;
}

// Overlay trigger states
interface OverlayTriggerState {
  readonly isOpen: boolean;
  setOpen(isOpen: boolean): void;
  open(): void;
  close(): void;
  toggle(): void;
}

interface MenuTriggerState extends OverlayTriggerState {
  focusStrategy?: FocusStrategy | null;
}

// Motion configuration for overlay animations
interface MotionProps {
  initial?: any;
  animate?: any;
  exit?: any;
  transition?: any;
  variants?: any;
  whileHover?: any;
  whileTap?: any;
  whileFocus?: any;
  whileInView?: any;
}

// Focus management
type FocusStrategy = "first" | "last";

// Selection types for dropdowns
type Selection = "all" | Set<React.Key>;

Integration Examples

Disclosure Hook Usage

The useDisclosure hook provides a convenient way to manage open/closed state for overlay components.

interface UseDisclosureProps {
  /** Whether overlay is open */
  isOpen?: boolean;
  /** Default open state */
  defaultOpen?: boolean;
  /** Close handler */
  onClose?: () => void;
  /** Open change handler */
  onOpenChange?: (isOpen: boolean) => void;
  /** Disclosure ID */
  id?: string;
}

interface UseDisclosureReturn {
  /** Whether overlay is open */
  isOpen: boolean;
  /** Open the overlay */
  onOpen: () => void;
  /** Close the overlay */
  onClose: () => void;
  /** Toggle overlay state */
  onOpenChange: (isOpen: boolean) => void;
  /** Whether state is controlled */
  isControlled: boolean;
  /** Props for trigger button */
  getButtonProps: (props?: any) => any;
  /** Props for disclosure content */
  getDisclosureProps: (props?: any) => any;
}

function useDisclosure(props?: UseDisclosureProps): UseDisclosureReturn;

Draggable Modal

Advanced modal functionality with drag support.

interface UseDraggableProps {
  /** Whether dragging is disabled */
  isDisabled?: boolean;
  /** Target element ref */
  targetRef?: React.RefObject<HTMLElement>;
  /** Body element ref */
  bodyRef?: React.RefObject<HTMLElement>;
  /** Drag constraints */
  dragConstraints?: any;
  /** Drag elastic behavior */
  dragElastic?: boolean;
}

interface UseDraggableReturn {
  /** Motion props for draggable element */
  dragProps: any;
  /** Drag controls */
  dragControls: any;
}

function useDraggable(props: UseDraggableProps): UseDraggableReturn;

Complex Overlay Composition

import { 
  Modal, ModalContent, ModalHeader, ModalBody, ModalFooter,
  Popover, PopoverTrigger, PopoverContent,
  Dropdown, DropdownTrigger, DropdownMenu, DropdownItem,
  Button, Input, useDisclosure
} from "@nextui-org/react";

function ComplexOverlayExample() {
  const modal = useDisclosure();
  const [selectedAction, setSelectedAction] = useState<string>("");

  return (
    <div className="space-y-4">
      {/* Main trigger */}
      <Button onPress={modal.onOpen} color="primary">
        Open Complex Dialog
      </Button>

      {/* Modal with nested overlays */}
      <Modal 
        isOpen={modal.isOpen} 
        onOpenChange={modal.onOpenChange}
        size="lg"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader>Project Settings</ModalHeader>
              <ModalBody className="space-y-4">
                <Input label="Project Name" placeholder="Enter project name" />
                
                <div className="flex gap-2">
                  {/* Popover for additional info */}
                  <Popover>
                    <PopoverTrigger>
                      <Button variant="bordered" size="sm">
                        Help
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent>
                      <div className="p-2 max-w-[200px]">
                        <p className="text-sm">
                          Choose a descriptive name for your project that will help you identify it later.
                        </p>
                      </div>
                    </PopoverContent>
                  </Popover>

                  {/* Dropdown for actions */}
                  <Dropdown>
                    <DropdownTrigger>
                      <Button variant="bordered" size="sm">
                        Actions
                      </Button>
                    </DropdownTrigger>
                    <DropdownMenu 
                      onAction={(key) => setSelectedAction(key as string)}
                    >
                      <DropdownItem key="duplicate">Duplicate</DropdownItem>
                      <DropdownItem key="export">Export</DropdownItem>
                      <DropdownItem key="archive">Archive</DropdownItem>
                      <DropdownItem key="delete" color="danger">
                        Delete
                      </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>

                {selectedAction && (
                  <div className="p-2 bg-default-100 rounded">
                    Selected action: {selectedAction}
                  </div>
                )}
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="flat" onPress={onClose}>
                  Cancel
                </Button>
                <Button color="primary" onPress={onClose}>
                  Save Changes
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
}

docs

core-system.md

data-display.md

date-time.md

feedback.md

forms.md

index.md

inputs.md

interactions.md

layout.md

navigation.md

overlays.md

utilities.md

tile.json