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 BACKERS.md/README.md 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.
| Variable | Values | Description |
|---|---|---|
$spacer | 1rem (default), or any value > 0 | Specifies the default spacer value to programmatically generate our spacer utilities. |
$enable-rounded | true (default) or false | Enables predefined border-radius styles on various components. |
$enable-shadows | true or false (default) | Enables predefined decorative box-shadow styles on various components. Does not affect box-shadows used for focus states. |
$enable-gradients | true or false (default) | Enables predefined gradients via background-image styles on various components. |
$enable-transitions | true (default) or false | Enables predefined transitions on various components. |
$enable-reduced-motion | true (default) or false | Enables the prefers-reduced-motion media query, which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
$enable-grid-classes | true (default) or false | Enables the generation of CSS classes for the grid system (e.g. .row, .col-md-1, etc.). |
$enable-container-classes | true (default) or false | Enables the generation of CSS classes for layout containers. (New in v4.2.0) |
$enable-caret | true (default) or false | Enables pseudo element caret on .dropdown-toggle. |
$enable-button-pointers | true (default) or false | Add "hand" cursor to non-disabled button elements. |
$enable-rfs | true (default) or false | Globally enables RFS. |
$enable-validation-icons | true (default) or false | Enables background-image icons within textual inputs and some custom forms for validation states. |
$enable-negative-margins | true or false (default) | Enables the generation of negative margin utilities. |
$enable-deprecation-messages | true (default) or false | Set to false to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in v6. |
$enable-important-utilities | true (default) or false | Enables the !important suffix in utility classes. |
$enable-smooth-scroll | true (default) or false | Applies scroll-behavior: smooth globally, except for users asking for reduced motion through prefers-reduced-motion media query |
$enable-ltr | false or false (default) | Enables Left-to-Right |
$enable-rtl | true (default) or false | Enables Right-to-Left |