0
# NextUI React
1

2
NextUI is a beautiful and modern React UI library that provides a comprehensive set of accessible components, advanced theming capabilities, and seamless integration with modern React development workflows. Built on top of React Aria and Tailwind CSS, it offers both beautiful design and robust functionality out of the box.
3

4
## Package Information
5

6
- **Package Name**: @nextui-org/react
7
- **Package Type**: npm  
8
- **Language**: TypeScript
9
- **Installation**: `npm install @nextui-org/react`
10

11
## Core Imports
12

13
```typescript
14
import { NextUIProvider, Button, Input, Card } from "@nextui-org/react";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { NextUIProvider, Button, Input, Card } = require("@nextui-org/react");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from "react";
27
import { NextUIProvider, Button, Card, CardBody, Input } from "@nextui-org/react";
28

29
function App() {
30
  return (
31
    <NextUIProvider>
32
      <div className="p-8 space-y-4">
33
        <Card>
34
          <CardBody>
35
            <h1 className="text-2xl font-bold mb-4">Welcome to NextUI</h1>
36
            <Input
37
              label="Email"
38
              placeholder="Enter your email"
39
              type="email"
40
              className="mb-4"
41
            />
42
            <Button color="primary">
43
              Get Started
44
            </Button>
45
          </CardBody>
46
        </Card>
47
      </div>
48
    </NextUIProvider>
49
  );
50
}
51

52
export default App;
53
```
54

55
## Architecture
56

57
NextUI is built around several key architectural principles:
58

59
- **Provider Pattern**: `NextUIProvider` manages global configuration including themes, localization, and routing
60
- **Component System**: Over 60 accessible components built on React Aria foundations
61
- **Theme Engine**: Advanced theming system with light/dark mode support and full customization capabilities
62
- **Variant System**: Tailwind Variants-based styling with consistent design tokens
63
- **Hook-First Design**: Each component exposes underlying hooks for maximum customization
64
- **Type Safety**: Comprehensive TypeScript support with full type inference
65
- **Accessibility**: ARIA-compliant components with keyboard navigation and screen reader support
66

67
## Capabilities
68

69
### Core System and Theming
70

71
NextUI's foundation includes the provider system, theme configuration, and styling utilities that power the entire library.
72

73
```typescript { .api }
74
// Provider component
75
interface NextUIProviderProps {
76
  children: React.ReactNode;
77
  locale?: string;
78
  theme?: "light" | "dark";
79
  themes?: ConfigThemes;
80
  defaultTheme?: string;
81
  disableAnimation?: boolean;
82
  disableRipple?: boolean;
83
  skipFramerMotionAnimations?: boolean;
84
  validationBehavior?: "aria" | "native";
85
  navigate?: (path: string) => void;
86
}
87

88
function NextUIProvider(props: NextUIProviderProps): JSX.Element;
89

90
// Theme utilities
91
function tv(config: TVConfig): (...args: any[]) => string;
92
function cn(...classes: ClassValue[]): string;
93
```
94

95
[Core System](./core-system.md)
96

97
### Layout Components
98

99
Structural components for organizing content and creating visual hierarchy.
100

101
```typescript { .api }
102
interface CardProps {
103
  children?: React.ReactNode;
104
  shadow?: "none" | "sm" | "md" | "lg";
105
  radius?: "none" | "sm" | "md" | "lg";
106
  fullWidth?: boolean;
107
  isHoverable?: boolean;
108
  isPressable?: boolean;
109
  isBlurred?: boolean;
110
  isDisabled?: boolean;
111
  disableAnimation?: boolean;
112
  disableRipple?: boolean;
113
  allowTextSelectionOnPress?: boolean;
114
  className?: string;
115
  classNames?: SlotsToClasses<CardSlots>;
116
}
117

118
interface SpacerProps {
119
  x?: number;
120
  y?: number;
121
  className?: string;
122
}
123

124
interface DividerProps {
125
  orientation?: "horizontal" | "vertical";
126
  className?: string;
127
}
128
```
129

130
[Layout Components](./layout.md)
131

132
### Interactive Components
133

134
Components for user actions and interactions including buttons and toggles with consistent styling and accessibility.
135

136
```typescript { .api }
137
interface ButtonProps {
138
  children?: React.ReactNode;
139
  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost";
140
  size?: "sm" | "md" | "lg";
141
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
142
  radius?: "none" | "sm" | "md" | "lg" | "full";
143
  fullWidth?: boolean;
144
  isDisabled?: boolean;
145
  isLoading?: boolean;
146
  isIconOnly?: boolean;
147
  startContent?: React.ReactNode;
148
  endContent?: React.ReactNode;
149
  spinner?: React.ReactNode;
150
  spinnerPlacement?: "start" | "end";
151
  disableRipple?: boolean;
152
  disableAnimation?: boolean;
153
  onPress?: (e: PressEvent) => void;
154
  className?: string;
155
  classNames?: SlotsToClasses<ButtonSlots>;
156
}
157

158
interface ButtonGroupProps {
159
  children: React.ReactNode;
160
  size?: "sm" | "md" | "lg";
161
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
162
  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost";
163
  radius?: "none" | "sm" | "md" | "lg" | "full";
164
  fullWidth?: boolean;
165
  isDisabled?: boolean;
166
  className?: string;
167
  classNames?: SlotsToClasses<ButtonGroupSlots>;
168
}
169
```
170

171
[Interactive Components](./interactions.md)
172

173
### Navigation Components
174

175
Components for navigation, routing, and organizing hierarchical content.
176

177
```typescript { .api }
178
interface NavbarProps {
179
  children?: React.ReactNode;
180
  height?: string | number;
181
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
182
  position?: "static" | "sticky";
183
  isBordered?: boolean;
184
  isBlurred?: boolean;
185
  shouldHideOnScroll?: boolean;
186
  className?: string;
187
  classNames?: SlotsToClasses<NavbarSlots>;
188
}
189

190
interface BreadcrumbsProps {
191
  children: React.ReactNode;
192
  separator?: React.ReactNode;
193
  size?: "sm" | "md" | "lg";
194
  radius?: "none" | "sm" | "md" | "lg" | "full";
195
  variant?: "solid" | "bordered" | "light";
196
  color?: "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
197
  underline?: "none" | "hover" | "always" | "active" | "focus";
198
  hideSeparator?: boolean;
199
  isDisabled?: boolean;
200
  disableAnimation?: boolean;
201
  className?: string;
202
  classNames?: SlotsToClasses<BreadcrumbsSlots>;
203
}
204
```
205

206
[Navigation Components](./navigation.md)
207

208
### Input Components
209

210
Form controls and input elements with validation and accessibility support.
211

212
```typescript { .api }
213
interface InputProps {
214
  children?: React.ReactNode;
215
  label?: React.ReactNode;
216
  value?: string;
217
  defaultValue?: string;
218
  placeholder?: string;
219
  description?: React.ReactNode;
220
  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode);
221
  validate?: (value: string) => ValidationError | true | null | undefined;
222
  validationBehavior?: "aria" | "native";
223
  validationState?: "valid" | "invalid";
224
  isRequired?: boolean;
225
  isReadOnly?: boolean;
226
  isDisabled?: boolean;
227
  isInvalid?: boolean;
228
  baseRef?: React.RefObject<HTMLDivElement>;
229
  hasHelper?: boolean;
230
  size?: "sm" | "md" | "lg";
231
  radius?: "none" | "sm" | "md" | "lg" | "full";
232
  variant?: "flat" | "bordered" | "underlined" | "faded";
233
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
234
  labelPlacement?: "inside" | "outside" | "outside-left";
235
  fullWidth?: boolean;
236
  isClearable?: boolean;
237
  disableAnimation?: boolean;
238
  className?: string;
239
  classNames?: SlotsToClasses<InputSlots>;
240
}
241

242
interface TextAreaProps {
243
  label?: React.ReactNode;
244
  value?: string;
245
  defaultValue?: string;
246
  placeholder?: string;
247
  minRows?: number;
248
  maxRows?: number;
249
  disableAutosize?: boolean;
250
  isRequired?: boolean;
251
  isDisabled?: boolean;
252
  isInvalid?: boolean;
253
  size?: "sm" | "md" | "lg";
254
  variant?: "flat" | "bordered" | "underlined" | "faded";
255
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
256
  className?: string;
257
  classNames?: SlotsToClasses<InputSlots>;
258
}
259

260
interface InputOTPProps {
261
  length?: number;
262
  value?: string;
263
  defaultValue?: string;
264
  placeholder?: string;
265
  isRequired?: boolean;
266
  isDisabled?: boolean;
267
  isInvalid?: boolean;
268
  size?: "sm" | "md" | "lg";
269
  variant?: "flat" | "bordered" | "underlined" | "faded";
270
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
271
  allowedKeys?: RegExp;
272
  className?: string;
273
  classNames?: SlotsToClasses<InputOTPSlots>;
274
  onValueChange?: (value: string) => void;
275
  onComplete?: (value: string) => void;
276
}
277

278
interface SelectProps<T> {
279
  children?: React.ReactNode;
280
  items?: Iterable<T>;
281
  label?: React.ReactNode;
282
  placeholder?: string;
283
  description?: React.ReactNode;
284
  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode);
285
  validate?: (value: SelectValue<T>) => ValidationError | true | null | undefined;
286
  selectionMode?: "single" | "multiple";
287
  selectedKeys?: "all" | Iterable<Key>;
288
  defaultSelectedKeys?: "all" | Iterable<Key>;
289
  disallowEmptySelection?: boolean;
290
  shouldFlip?: boolean;
291
  isRequired?: boolean;
292
  isInvalid?: boolean;
293
  isDisabled?: boolean;
294
  isLoading?: boolean;
295
  size?: "sm" | "md" | "lg";
296
  radius?: "none" | "sm" | "md" | "lg" | "full";
297
  variant?: "flat" | "bordered" | "underlined" | "faded";
298
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
299
  className?: string;
300
  classNames?: SlotsToClasses<SelectSlots>;
301
}
302
```
303

304
[Input Components](./inputs.md)
305

306
### Data Display Components
307

308
Components for presenting data, images, and content in organized formats.
309

310
```typescript { .api }
311
interface TableProps<T> {
312
  children?: React.ReactNode;
313
  "aria-label"?: string;
314
  "aria-labelledby"?: string;
315
  "aria-describedby"?: string;
316
  layout?: "auto" | "fixed";
317
  hideHeader?: boolean;
318
  showSelectionCheckboxes?: boolean;
319
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
320
  selectionMode?: "none" | "single" | "multiple";
321
  selectionBehavior?: "toggle" | "replace";
322
  selectedKeys?: "all" | Iterable<Key>;
323
  defaultSelectedKeys?: "all" | Iterable<Key>;
324
  disallowEmptySelection?: boolean;
325
  sortDescriptor?: SortDescriptor;
326
  onSelectionChange?: (keys: Selection) => void;
327
  onSortChange?: (descriptor: SortDescriptor) => void;
328
  isHeaderSticky?: boolean;
329
  isCompact?: boolean;
330
  removeWrapper?: boolean;
331
  isStriped?: boolean;
332
  fullWidth?: boolean;
333
  className?: string;
334
  classNames?: SlotsToClasses<TableSlots>;
335
}
336

337
interface AvatarProps {
338
  src?: string;
339
  alt?: string;
340
  name?: string;
341
  icon?: React.ReactNode;
342
  fallback?: React.ReactNode;
343
  size?: "sm" | "md" | "lg";
344
  radius?: "none" | "sm" | "md" | "lg" | "full";
345
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
346
  isBordered?: boolean;
347
  isDisabled?: boolean;
348
  isFocusable?: boolean;
349
  showFallback?: boolean;
350
  imgRef?: React.RefObject<HTMLImageElement>;
351
  className?: string;
352
  classNames?: SlotsToClasses<AvatarSlots>;
353
}
354
```
355

356
[Data Display Components](./data-display.md)
357

358
### Feedback Components
359

360
Components for providing user feedback including loading states, notifications, and informational overlays.
361

362
```typescript { .api }
363
interface ProgressProps {
364
  label?: React.ReactNode;
365
  size?: "sm" | "md" | "lg";
366
  radius?: "none" | "sm" | "md" | "lg" | "full";
367
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
368
  value?: number;
369
  minValue?: number;
370
  maxValue?: number;
371
  isIndeterminate?: boolean;
372
  showValueLabel?: boolean;
373
  valueLabel?: React.ReactNode;
374
  formatOptions?: Intl.NumberFormatOptions;
375
  isDisabled?: boolean;
376
  disableAnimation?: boolean;
377
  className?: string;
378
  classNames?: SlotsToClasses<ProgressSlots>;
379
}
380

381
interface SpinnerProps {
382
  label?: React.ReactNode;
383
  size?: "sm" | "md" | "lg";
384
  color?: "current" | "white" | "default" | "primary" | "secondary" | "success" | "warning" | "danger";
385
  labelColor?: "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
386
  className?: string;
387
  classNames?: SlotsToClasses<SpinnerSlots>;
388
}
389

390
interface TooltipProps {
391
  children: React.ReactElement;
392
  content?: React.ReactNode;
393
  isOpen?: boolean;
394
  defaultOpen?: boolean;
395
  placement?: Placement;
396
  delay?: number;
397
  closeDelay?: number;
398
  isDisabled?: boolean;
399
  shouldFlip?: boolean;
400
  containerPadding?: number;
401
  offset?: number;
402
  crossOffset?: number;
403
  showArrow?: boolean;
404
  radius?: "none" | "sm" | "md" | "lg" | "full";
405
  size?: "sm" | "md" | "lg";
406
  color?: "default" | "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
407
  className?: string;
408
  classNames?: SlotsToClasses<TooltipSlots>;
409
}
410
```
411

412
[Feedback Components](./feedback.md)
413

414
### Overlay Components
415

416
Modal dialogs, popovers, dropdowns and other overlay components for complex interactions.
417

418
```typescript { .api }
419
interface ModalProps {
420
  children: React.ReactNode;
421
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
422
  radius?: "none" | "sm" | "md" | "lg";
423
  shadow?: "sm" | "md" | "lg";
424
  backdrop?: "transparent" | "opaque" | "blur";
425
  scrollBehavior?: "inside" | "outside";
426
  placement?: "auto" | "top" | "center" | "bottom";
427
  isOpen?: boolean;
428
  defaultOpen?: boolean;
429
  isDismissable?: boolean;
430
  isKeyboardDismissDisabled?: boolean;
431
  hideCloseButton?: boolean;
432
  shouldBlockScroll?: boolean;
433
  portalContainer?: Element;
434
  disableAnimation?: boolean;
435
  motionProps?: MotionProps;
436
  className?: string;
437
  classNames?: SlotsToClasses<ModalSlots>;
438
  onOpenChange?: (isOpen: boolean) => void;
439
  onClose?: () => void;
440
}
441

442
interface PopoverProps {
443
  children: React.ReactNode;
444
  size?: "sm" | "md" | "lg";
445
  color?: "default" | "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
446
  radius?: "none" | "sm" | "md" | "lg" | "full";
447
  shadow?: "sm" | "md" | "lg";
448
  backdrop?: "transparent" | "opaque" | "blur";
449
  placement?: Placement;
450
  isOpen?: boolean;
451
  defaultOpen?: boolean;
452
  shouldFlip?: boolean;
453
  shouldUpdatePosition?: boolean;
454
  shouldBlockScroll?: boolean;
455
  isDismissable?: boolean;
456
  shouldCloseOnBlur?: boolean;
457
  shouldCloseOnInteractOutside?: (element: Element) => boolean;
458
  isKeyboardDismissDisabled?: boolean;
459
  showArrow?: boolean;
460
  offset?: number;
461
  crossOffset?: number;
462
  containerPadding?: number;
463
  triggerRef?: React.RefObject<Element>;
464
  scrollRef?: React.RefObject<Element>;
465
  portalContainer?: Element;
466
  disableAnimation?: boolean;
467
  motionProps?: MotionProps;
468
  className?: string;
469
  classNames?: SlotsToClasses<PopoverSlots>;
470
  onOpenChange?: (isOpen: boolean) => void;
471
}
472
```
473

474
[Overlay Components](./overlays.md)
475

476
### Date and Time Components
477

478
Components for date selection, calendar navigation, and time input with internationalization support.
479

480
```typescript { .api }
481
interface CalendarProps<T extends DateValue> {
482
  value?: T | null;
483
  defaultValue?: T | null;
484
  minValue?: DateValue | null;
485
  maxValue?: DateValue | null;
486
  isDateUnavailable?: (date: DateValue) => boolean;
487
  autoFocus?: boolean;
488
  focusedValue?: DateValue | null;
489
  defaultFocusedValue?: DateValue | null;
490
  calendarWidth?: number;
491
  visibleMonths?: number;
492
  pageBehavior?: PageBehavior;
493
  weekdayStyle?: "narrow" | "short" | "long";
494
  showMonthAndYearPickers?: boolean;
495
  isDisabled?: boolean;
496
  isReadOnly?: boolean;
497
  isInvalid?: boolean;
498
  color?: "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
499
  showHelper?: boolean;
500
  topContent?: React.ReactNode;
501
  bottomContent?: React.ReactNode;
502
  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode);
503
  validate?: (value: MappedDateValue<T>) => ValidationError | true | null | undefined;
504
  validationBehavior?: "aria" | "native";
505
  className?: string;
506
  classNames?: SlotsToClasses<CalendarSlots>;
507
  onFocusChange?: (date: CalendarDate) => void;
508
  onChange?: (value: MappedDateValue<T>) => void;
509
}
510

511
interface DatePickerProps<T extends DateValue> extends Omit<DateInputProps<T>, "size"> {
512
  size?: "sm" | "md" | "lg";
513
  selectorIcon?: React.ReactNode;
514
  calendarWidth?: number;
515
  visibleMonths?: number;
516
  pageBehavior?: PageBehavior;
517
  calendarProps?: Partial<CalendarProps<T>>;
518
  showMonthAndYearPickers?: boolean;
519
  shouldCloseOnSelect?: boolean;
520
  className?: string;
521
  classNames?: SlotsToClasses<DatePickerSlots>;
522
}
523
```
524

525
[Date and Time Components](./date-time.md)
526

527
### Form Integration
528

529
Advanced form handling components and integration patterns for validation and data collection.
530

531
```typescript { .api }
532
interface FormProps {
533
  children?: React.ReactNode;
534
  validationErrors?: ValidationErrors;
535
  validationBehavior?: "aria" | "native";
536
  className?: string;
537
  onReset?: () => void;
538
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
539
  onInvalidSubmit?: (errors: ValidationErrors) => void;
540
}
541

542
// Validation types
543
type ValidationError = string | string[];
544

545
interface ValidationResult {
546
  isInvalid: boolean;
547
  validationErrors: string[];
548
  validationDetails: ValidationDetails;
549
}
550

551
interface ValidationErrors {
552
  [name: string]: ValidationError;
553
}
554
```
555

556
[Form Integration](./forms.md)
557

558
### Utilities and Hooks
559

560
Utility functions, custom hooks, and helper types for extending NextUI functionality.
561

562
```typescript { .api }
563
// Disclosure hook for modal/popover state
564
interface UseDisclosureProps {
565
  isOpen?: boolean;
566
  defaultOpen?: boolean;
567
  onClose?: () => void;
568
  onOpenChange?: (isOpen: boolean) => void;
569
  id?: string;
570
}
571

572
interface UseDisclosureReturn {
573
  isOpen: boolean;
574
  onOpen: () => void;
575
  onClose: () => void;
576
  onOpenChange: (isOpen: boolean) => void;
577
  onToggle: () => void;
578
  isControlled: boolean;
579
  getButtonProps: (props?: any) => any;
580
  getDisclosureProps: (props?: any) => any;
581
}
582

583
function useDisclosure(props?: UseDisclosureProps): UseDisclosureReturn;
584

585
// Utility functions
586
function forwardRef<T, P = {}>(
587
  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
588
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
589

590
function cn(...inputs: ClassValue[]): string;
591

592
// Resizable panel for flexible layouts
593
interface ResizablePanelProps {
594
  children: React.ReactNode;
595
  defaultSize?: number;
596
  minSize?: number;
597
  maxSize?: number;
598
  direction?: "horizontal" | "vertical";
599
  isDisabled?: boolean;
600
  id?: string;
601
  className?: string;
602
  onSizeChange?: (size: number) => void;
603
}
604

605
function ResizablePanel(props: ResizablePanelProps): JSX.Element;
606
```
607

608
[Utilities and Hooks](./utilities.md)
609

610
## Type Definitions
611

612
### Common Types
613

614
```typescript { .api }
615
// Size variants used across components
616
type Size = "sm" | "md" | "lg";
617

618
// Color variants for theming
619
type Color = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
620

621
// Radius variants for rounded corners
622
type Radius = "none" | "sm" | "md" | "lg" | "full";
623

624
// Common component slots
625
type SlotsToClasses<S extends string> = {
626
  [key in S]?: string;
627
};
628

629
// Selection types
630
type Selection = "all" | Set<React.Key>;
631
type SelectionMode = "none" | "single" | "multiple";
632
type SelectionBehavior = "toggle" | "replace";
633

634
// Validation types  
635
type ValidationBehavior = "aria" | "native";
636
interface ValidationResult {
637
  isInvalid: boolean;
638
  validationErrors: string[];
639
  validationDetails: ValidationDetails;
640
}
641

642
// Date types (re-exported from @internationalized/date)
643
type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
644
type MappedDateValue<T> = T extends ZonedDateTime ? ZonedDateTime : 
645
                         T extends CalendarDateTime ? CalendarDateTime : 
646
                         CalendarDate;
647

648
// Placement for overlays
649
type Placement = 
650
  | "top" | "top-start" | "top-end"
651
  | "bottom" | "bottom-start" | "bottom-end"
652
  | "right" | "right-start" | "right-end"
653
  | "left" | "left-start" | "left-end";
654

655
// Animation and motion types
656
interface MotionProps {
657
  initial?: any;
658
  animate?: any;
659
  exit?: any;
660
  transition?: any;
661
  variants?: any;
662
}
663

664
// Button-specific types
665
type ButtonSlots = "base";
666
type ButtonGroupSlots = "base";
667

668
// Press event from React Aria
669
interface PressEvent {
670
  /** The type of press event being fired */
671
  type: 'pressstart' | 'pressend' | 'pressup' | 'press';
672
  /** The pointer type that triggered the press event */
673
  pointerType: 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
674
  /** The target element of the press event */
675
  target: Element;
676
  /** Whether the shift keyboard modifier was held during the press event */
677
  shiftKey: boolean;
678
  /** Whether the ctrl keyboard modifier was held during the press event */
679
  ctrlKey: boolean;
680
  /** Whether the meta keyboard modifier was held during the press event */
681
  metaKey: boolean;
682
  /** Whether the alt keyboard modifier was held during the press event */
683
  altKey: boolean;
684
}
685
```