Hire UsGet CoreUI PRO all-access →

Migration to v5

MarkdownChatGPTClaude

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

On this page

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.

Dependencies

  • Breaking 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.
  • Breaking 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

  • Breaking 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

  • Breaking 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

  • Breaking Renamed component property to as.
  • Breaking The button doesn’t have a default color anymore, you have to add color="primary"

CCalendar

  • Breaking 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

  • Breaking Renamed component property to as.

CCardImage

  • Breaking Renamed component property to as.

CCardSubtitle

  • Breaking Renamed component property to as.

CCardText

  • Breaking Renamed component property to as.

CCardTitle

  • Breaking Renamed component property to as.

CCloseButton

  • Deprecated property white, use dark instead of.

CDatePicker

  • Breaking 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.

    // Previous markup
<CDatePicker format="MMMM-dd-yyyy"/>

// 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

  • Breaking 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.

    // Previous markup
<CDateRangePicker format="MMMM-dd-yyyy"/>

// 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

  • Breaking Renamed component property to as.

CDropdownHeader

  • Breaking Renamed component property to as.

CDropdownItem

  • Breaking Renamed component property to as.

CDropdownItemPlain

  • Breaking Renamed component property to as.

CDropdownMenu

  • Breaking Renamed component property to as.

CDropdownToggle

  • Breaking Renamed component property to as.
  • Breaking The toggle doesn’t have a default color anymore, you have to add color="primary"

CFormFeedback

  • Breaking Renamed component property to as.

CFormText

  • Breaking Renamed component property to as.

CHeaderBrand

  • Breaking Renamed component property to as.

CHeaderNav

  • Breaking Renamed component property to as.

CInputGroupText

  • Breaking Renamed component property to as.
  • Breaking Renamed component property to as.

CListGroup

  • Breaking Renamed component property to as.

CListGroupItem

  • Breaking Renamed component property to as.

CLoadingButton

  • Breaking Renamed component property to as.
  • Breaking The button doesn’t have a default color anymore, you have to add color="primary"

CModalTitle

  • Breaking Renamed component property to as.

CMultiSelect

  • Removed key text in the options list, use label instead

CNav

  • Breaking Renamed component property to as.
  • Breaking The v4 underline look is now the underline-border variant. variant="underline" is a new style without the line under the whole nav.

CNavbar

  • Breaking Renamed component property to as.

CNavbarBrand

  • Breaking Renamed component property to as.

CNavbarNav

  • Breaking Renamed component property to as.

CNavItem

  • Breaking 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:

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

// New markup
<CNavItem>
  <CNavLink as={NavLink} to="/dashboard">Dashboard</CNavLink>
</CNavItem>
  • Breaking Renamed component property to as.

CNavTitle

  • Added as property to set the root element.

COffcanvasTitle

  • Breaking Renamed component property to as.

CPaginationItem

  • Breaking Renamed component property to as.

CPlaceholder

  • Breaking Renamed component property to as.

CSidebar

  • Breaking Sidebar has a light color scheme by default, use colorScheme="dark" to make it dark.

CSpinner

  • Breaking Renamed component property to as.

CToastClose

  • Breaking Renamed component property to as.
  • Deprecated property white, use dark instead of.