# Migration to v5

> Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.

CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 4 to 5 migration guide](https://coreui.io/bootstrap/docs/migration/v5/).

## Dependencies

- <span className="badge bg-danger">Breaking</span> React 18 or newer is required. The peer range still reads `>=17`, but `CAccordionItem`, `CAutocomplete`, `CMultiSelect`, `CNavGroup`, `CPopover`, `CRating`, `CStepper`, `CTabs` and `CTooltip` use React's `useId`, which React 17 does not have.
- `@coreui/coreui-pro` is no longer a peer dependency. `@coreui/react-pro` installs it as its own dependency. If your app imports the CoreUI stylesheet or Sass, keep `@coreui/coreui-pro` on the same 5.x version so that only one copy is installed.
- `@popperjs/core` and `prop-types` were bundled into the v4 build. In v5 they are regular dependencies of `@coreui/react-pro`.
- `date-fns` is no longer used or bundled. See `CDatePicker` and `CDateRangePicker` below.
- <span className="badge bg-danger">Breaking</span> The build moved from `dist/index.js` and `dist/index.es.js` to `dist/cjs/` and `dist/esm/`. Deep imports from `@coreui/react-pro/dist/...` break. Import from `@coreui/react-pro` instead.

## Components

### CAlertHeading

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CAvatar

- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`. They still render, but TypeScript no longer suggests them. Use `body` instead of `high-emphasis`, `body-secondary` instead of `muted` and `medium-emphasis`, and `body-tertiary` instead of `disabled`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white-50`.

### CBadge

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`. They still render, but TypeScript no longer suggests them. Use `body` instead of `high-emphasis`, `body-secondary` instead of `muted` and `medium-emphasis`, and `body-tertiary` instead of `disabled`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white-50`.

### CButton

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The button doesn't have a default color anymore, you have to add `color="primary"`

### CCalendar

- <span className="badge bg-danger">Breaking</span> Renamed `onDayHover` event to `onDateHover`.
- `onStartDateChange`, `onEndDateChange` and `onDateHover` receive `Date | string | null`. The value is a string when `selectionType` is `week`, `month`, `quarter` or `year`. With the default day selection it is still a `Date`.

### CCard

- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`. They still render. Use `body` instead of `high-emphasis`, `body-secondary` instead of `muted` and `medium-emphasis`, and `body-tertiary` instead of `disabled`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white-50`.

### CCardHeader

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardImage

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardSubtitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCloseButton

- Deprecated property `white`, use `dark` instead of.

### CDatePicker

- <span className="badge bg-danger">Breaking</span> Removed property `format`, use `inputDateFormat` instead of. In v4, setting `format` also made the input read-only. Add `inputReadOnly` to keep that. If users may type a date, also pass `inputDateParse`.

  ```jsx
  // Previous markup
  

  // New markup
  import { format } from 'date-fns'
  //...
  <CDatePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} inputReadOnly />
  ```

- `onDateChange` still receives the date and the formatted date. The date is now typed `Date | string | null`. It is a string when `selectionType` is `week`, `month`, `quarter` or `year`. With the default day selection it is still a `Date`.

### CDateRangePicker

- <span className="badge bg-danger">Breaking</span> Removed property `format`, use `inputDateFormat` instead of. In v4, setting `format` also made the inputs read-only. Add `inputReadOnly` to keep that. If users may type a date, also pass `inputDateParse`.

  ```jsx
  // Previous markup
  

  // New markup
  import { format } from 'date-fns'
  //...
  <CDateRangePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} inputReadOnly />
  ```

- `onStartDateChange` and `onEndDateChange` still receive the date and the formatted date. The date is now typed `Date | string | null`. It is a string when `selectionType` is `week`, `month`, `quarter` or `year`. With the default day selection it is still a `Date`.

### CDropdown

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownHeader

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownItemPlain

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownMenu

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownToggle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The toggle doesn't have a default color anymore, you have to add `color="primary"`

### CFormFeedback

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CFormText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CHeaderBrand

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CHeaderNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CInputGroupText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CLink

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CListGroup

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CListGroupItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CLoadingButton

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The button doesn't have a default color anymore, you have to add `color="primary"`

### CModalTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CMultiSelect

- Removed key `text` in the options list, use `label` instead

### CNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The v4 `underline` look is now the `underline-border` variant. `variant="underline"` is a new style without the line under the whole nav.

### CNavbar

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavbarBrand

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavbarNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavItem

- <span className="badge bg-danger">Breaking</span> In v4, `CNavItem` with `href` or `to` passed `component` to the `CNavLink` it renders inside the `<li>`. In v5, `as` replaces the `<li>` itself and is not passed to the link. Render the link yourself:

  ```jsx
  // Previous markup
  <CNavItem component={NavLink} to="/dashboard">Dashboard</CNavItem>

  // New markup
  <CNavItem>
    <CNavLink as={NavLink} to="/dashboard">Dashboard</CNavLink>
  </CNavItem>
  ```

### CNavLink

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavTitle

- Added `as` property to set the root element.

### COffcanvasTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CPaginationItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CPlaceholder

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CSidebar

- <span className="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use `colorScheme="dark"` to make it dark.

### CSpinner

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CToastClose

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- Deprecated property `white`, use `dark` instead of.