NextUI Provider

API reference for the NextUIProvider.



import * as React from "react";
import {NextUIProvider} from "@nextui-org/react";
function App() {
return (
<YourApplication />



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


  • Description: The locale to apply to the children.
  • Type: string | undefined
  • Default: en-US

Here's the supported locales. By default, It is en-US.

const localeValues = [
'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES',
'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG',
'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT',
'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI',
'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA',
'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'

Here's an example to set a Spanish locale.

"use client";
import {type ReactNode} from "react";
import {NextUIProvider} from "@nextui-org/react";
export function AppProvider(props: AppProviderProps) {
const {children, className} = props;
return (
<NextUIProvider locale="es-ES" className={className}>
interface AppProviderProps {
children: ReactNode;
className?: string;


  • 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) }


  • 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();
    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


  • 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


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


  • 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


  • Description: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
  • Type: native | aria
  • Default: aria



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


Supported react-aria i18n calendars.

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