Ship faster with beautiful components
NextUI Pro

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: Href, routerOptions?: RouterOptions) => void) | undefined

See Router Guide

useHref

  • Description: Convert an href provided to a link component to a native href. For example, a router might accept hrefs relative to a base path, or offer additional custom ways of specifying link destinations. The original href specified on the link is passed to the navigate function of the RouterProvider, and useHref is used to generate the full native href to put on the actual DOM element.
  • Type: ((href: Href) => string) | undefined

See Router Guide

locale

  • 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}>
      {children}
    </NextUIProvider>
  );
}


interface AppProviderProps {
  children: ReactNode;
  className?: string;
}

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

validationBehavior

  • 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

reducedMotion

  • Description: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. The available options are:
    • "user": Adapts to the user's device settings for reduced motion.
    • "always": Disables all animations.
    • "never": Keeps all animations active.
  • Type: "user" | "always" | "never"
  • Default: "never"

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";
NextUI CLI