Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on files or each site of this documentation
  • Give us a star ⭐️ on Github.

Quickly customize CoreUI for React with built-in variables to easily toggle global CSS preferences for controlling style and behavior.

Customize CoreUI for React with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable's value and recompile with npm run test as needed.

You can find and customize these variables for key global options in CoreUI's @coreui/coreui/scss/_variables.scss file.

$spacer1rem (default), or any value > 0Specifies the default spacer value to programmatically generate our spacer utilities.
$enable-roundedtrue (default) or falseEnables predefined border-radius styles on various components.
$enable-shadowstrue or false (default)Enables predefined decorative box-shadow styles on various components. Does not affect box-shadows used for focus states.
$enable-gradientstrue or false (default)Enables predefined gradients via background-image styles on various components.
$enable-transitionstrue (default) or falseEnables predefined transitions on various components.
$enable-reduced-motiontrue (default) or falseEnables the prefers-reduced-motion media query, which suppresses certain animations/transitions based on the users' browser/operating system preferences.
$enable-grid-classestrue (default) or falseEnables the generation of CSS classes for the grid system (e.g. .row, .col-md-1, etc.).
$enable-container-classestrue (default) or falseEnables the generation of CSS classes for layout containers. (New in v4.2.0)
$enable-carettrue (default) or falseEnables pseudo element caret on .dropdown-toggle.
$enable-button-pointerstrue (default) or falseAdd "hand" cursor to non-disabled button elements.
$enable-rfstrue (default) or falseGlobally enables RFS.
$enable-validation-iconstrue (default) or falseEnables background-image icons within textual inputs and some custom forms for validation states.
$enable-negative-marginstrue or false (default)Enables the generation of negative margin utilities.
$enable-deprecation-messagestrue (default) or falseSet to false to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in v6.
$enable-important-utilitiestrue (default) or falseEnables the !important suffix in utility classes.
$enable-smooth-scrolltrue (default) or falseApplies scroll-behavior: smooth globally, except for users asking for reduced motion through prefers-reduced-motion media query
$enable-ltrfalse or false (default)Enables Left-to-Right
$enable-rtltrue (default) or falseEnables Right-to-Left
On this page