NextUI Provider

API reference for the NextUIProvider.

---

Import

Usage

import * as React from "react";
import {NextUIProvider} from "@nextui-org/react";

function App() {
  return (
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
  );
}

Props

navigate

• Description: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
• Type: ((path: string) => void) | undefined

locale

• Description: The locale to apply to the children. The BCP47 language code for the locale. By default, It is en-US.
• Type: string | undefined
• Default: en-US

defaultDates

• Description: The default dates range that can be selected in the calendar.
• Type: { minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }
• Default: { minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }

createCalendar

• Description: This function helps to reduce the bundle size by providing a custom calendar system.

  By default, this includes all calendar systems supported by @internationalized/date. However, if your application supports a more limited set of regions, or you know you will only be picking dates in a certain calendar system, you can reduce your bundle size by providing your own implementation of createCalendar that includes a subset of these Calendar implementations.

  For example, if your application only supports Gregorian dates, you could implement a createCalendar function like this:

  import {GregorianCalendar} from '@internationalized/date';
  
  function createCalendar(identifier) {
  switch (identifier) {
    case 'gregory':
      return new GregorianCalendar();
    default:
      throw new Error(`Unsupported calendar ${identifier}`);
  }
  }
  

  This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.

• Type: ((calendar: SupportedCalendars) => Calendar | null) | undefined

disableAnimation

• Description: Disables animations globally. This will also avoid framer-motion features to be loaded in the bundle which can potentially reduce the bundle size.
• Type: boolean
• Default: false

disableRipple

• Description: Disables ripple effect globally.
• Type: boolean
• Default: false

skipFramerMotionAnimations

• Description: Controls whether framer-motion animations are skipped within the application. This property is automatically enabled (true) when the disableAnimation prop is set to true, effectively skipping all framer-motion animations. To retain framer-motion animations while using the disableAnimation prop for other purposes, set this to false. However, note that animations in NextUI Components are still omitted if the disableAnimation prop is true.
• Type: boolean
• Default: Same as disableAnimation

---

Types

CalendarDate

• Description: A CalendarDate represents a date without any time components in a specific calendar system from @internationalized/date.
• Type: import {CalendarDate} from '@internationalized/date';

SupportedCalendars

Supported react-aria i18n calendars.

type SupportedCalendars =
  | "buddhist"
  | "ethiopic"
  | "ethioaa"
  | "coptic"
  | "hebrew"
  | "indian"
  | "islamic-civil"
  | "islamic-tbla"
  | "islamic-umalqura"
  | "japanese"
  | "persian"
  | "roc"
  | "gregory";