CoreUI v5.3.0

We are excited to announce the release of CoreUI v5.3.0! This update introduces a major refactor, modernizing our styles with the Sass module system, enhancing RTL (Right-to-Left) support through CSS logical properties, and resolving several bugs to improve performance, stability, and maintainability.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

To upgrade your project to CoreUI v5.3.0, follow these steps:

1. Open your project’s package.json.
2. Locate the @coreui/coreui entry under dependencies and update the version number to 5.3.0.
3. Save your changes to the package.json file.
4. In your project’s root directory, execute the appropriate command:
   • For npm users: Run npm install
   • For yarn users: Run yarn install

What’s New

Migration to the Sass Module System

CoreUI now fully embraces the Sass module system, deprecating Node Sass and modernizing our codebase with @use and @forward. Key improvements:

• Refactored imports: Replaced @import with @use and @forward, aligning with the latest best practices.
• Enhanced color manipulation:
  • Replaced outdated functions like blue(), green(), and red() with color.channel().
  • Adopted color.scale() instead of desaturate().
  • Migrated mix() to color.mix().
• Math function refinements:
  • unit() replaced with math.unit().
  • comparable() replaced with math.compatible().
  • percentage() replaced with math.percentage().
• String and list function updates:
  • Migrated str-index(), str-length(), and str-slice() to string.index(), string.length(), and string.slice().
  • Replaced append() with list.append() and zip() with list.zip().
• Map function enhancements:
  • Updated map-get(), map-merge(), and map-keys() to map.get(), map.merge(), and map.keys().
  • Replaced map-values() with map.values().
• Other refinements:
  • Migrated type-of() to meta.type-of().
  • Updated unquote() to string.unquote().
  • Replaced call() with meta.call() and get-function() with meta.get-function().

This migration ensures CoreUI remains future-proof, leveraging the latest advancements in Sass.

Improved RTL & LTR Support with CSS Logical Properties

We’ve made a major shift to CSS logical properties, enabling better RTL support and more adaptable layouts:

• Replaced directional properties like margin-left, padding-right, and border-left with their logical counterparts (margin-inline-start, padding-inline-end, etc.).
• Enhanced layout flexibility, ensuring UI elements automatically adjust to different writing modes.

This change significantly improves the experience for developers building applications in multiple languages.

Fixes & Improvements

• Fixed: Offcanvas close button positioning for improved UI consistency.
• Fixed: Sidebar now correctly highlights the active link when the current URL starts with the href value.
• Fixed: Resolved an invalid pseudo-element variable in _form-select.scss, ensuring proper styling.

New Features

• Added: Experimental support for CSS Container Queries, allowing developers to create more flexible and responsive layouts.

Dependency Updates

To ensure better compatibility, security, and performance, we have updated several key dependencies:

• Updated @babel/cli from ^7.25.9 to ^7.26.4
• Updated @babel/core from ^7.26.0 to ^7.26.8
• Updated @babel/preset-env from ^7.26.0 to ^7.26.8
• Updated @docsearch/js from ^3.6.2 to ^3.8.3
• Updated @eslint/markdown from ^6.2.1 to ^6.2.2
• Updated @rollup/plugin-commonjs from ^28.0.1 to ^28.0.2
• Updated @rollup/plugin-node-resolve from ^15.3.0 to ^16.0.0
• Updated @rollup/plugin-replace from ^6.0.1 to ^6.0.2
• Updated eslint from ^8.57.0 to ^9.20.1
• Updated eslint-plugin-react from ^7.34.3 to ^7.35.0
• Updated eslint-plugin-unicorn from ^54.0.0 to ^55.0.0
• Updated globals from ^15.14.0 to ^15.15.0
• Updated globby from ^14.0.2 to ^14.1.0
• Updated hugo-bin from ^0.133.5 to ^0.140.1
• Updated jasmine from ^5.4.0 to ^5.6.0
• Updated nodemon from ^3.1.7 to ^3.1.9
• Updated postcss from ^8.4.47 to ^8.5.2
• Updated rimraf from ^5.0.8 to ^6.0.1
• Updated rollup from ^4.24.1 to ^4.34.6
• Updated sass-embedded from ^1.83.1 to ^1.83.4
• Updated stylelint from ^16.10.0 to ^16.14.1
• Updated terser from ^5.36.0 to ^5.39.0
• Updated ts-jest from ^29.1.5 to ^29.2.5
• Updated tslib from ^2.6.3 to ^2.7.0
• Updated typescript from ^5.5.4 to ^5.6.2

For a comprehensive breakdown of all enhancements and fixes, check out the full changelog on GitHub.