The new version of CoreUI is available. Please check the latest version.
Migrating to v3.0.0
CoreUI 3.0.0 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
On this page:
Summary
Here are the big ticket items you’ll want to be aware of when moving from v2.x.x to v3.0.0.
Highlights
CoreUI components have been prefixed. We decided to add c- prefix to each class to avoid CSS classes collision and isolate CoreUI’s styles and scripts.
CoreUI and Bootstrap source code is deeply integrated. We decided to combine Bootstrap’s and our SCSS and JavaScript files. It allows us to build some new features, ex. Theme switcher, and deliver more consistent, lighter code.
Removed jQuery in favor of regular JavaScript. CoreUI Library (@coreui/coreui) doesn’t need jQuery anymore. However, some of the third party components we use in our admin templates still require jQuery.
New design which goes in hand with modern standards:
Elevations system
Themes support
Introduce new components libraries for Angular (@coreui/angular), React.js (@coreui/react), and Vue.js (@coreui/vue). The third party components libraries ngx-bootstrap, reactstrap, bootstrap-vue, are deprecated. Since version 3.x our libraries contain not only our components but also cover all Bootstrap’s elements.
By component
This list highlights key changes by component between v2.x.x and v3.0.0.
Sidebar
Following CSS classes have been changed:
sidebar to c-sidebar
sidebar-header to c-sidebar-header
sidebar-brand to c-sidebar-brand
sidebar-nav to c-sidebar-nav
sidebar-footer to c-sidebar-footer
sidebar-minimizer to c-sidebar-minimizer
nav-item to c-sidebar-nav-item
nav-link to c-sidebar-nav-link
nav-dropdown to c-sidebar-nav-dropdown
nav-dropdown-items to c-sidebar-nav-dropdown-items
nav-dropdown-toggle to c-sidebar-nav-dropdown-toggle
nav-divider to c-sidebar-nav-divider
nav-title to c-sidebar-nav-title
Header
Following CSS classes have been changed:
app-header to c-header
navbar-brand to c-header-brand
navbar-toggler to c-header-toggler
nav to c-header-nav
nav-item to c-header-nav-item
nav-link to c-header-nav-link
Layout Components
Following CSS classes have been changed:
app to c-app
app-body to c-body
app-footer to c-footer
main to c-main
Switches
We’ve changed .switch-outline-alt-* to .switch-opposite-*.
Aside Menu
Aside menu has been deprecated, please use <div class="c-sidebar c-sidebar-right">...</div> instead of.