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:
Learn how to theme, customize, and extend CoreUI React Templates with Sass, a boatload of global options.
There are multiple ways to customize CoreUI for React. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for React you're using, browser support, and more.
Our two preferred methods are:
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for React so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
1your-project/2├── ...3├── node_modules/4│ ├── @coreui/coreui5│ │ ├── scss6│ │ └── ...7│ └── @coreui/react8│ └── ...9├── src10│ └── scss11│ ├── _custom.scss12│ ├── ...13│ ├── _variables.scss14│ └── ...15└── ...
If you use CoreUI PRO version.
1your-project/2├── ...3├── node_modules/4│ ├── @coreui/coreui-pro5│ │ ├── scss6│ │ └── ...7│ └── @coreui/react-pro8│ └── ...9├── src10│ └── scss11│ ├── _custom.scss12│ ├── ...13│ ├── _variables.scss14│ └── ...15└── ...
Every Sass variable in CoreUI for React includes the !default
flag allowing you to override the variable's default value in your own Sass without modifying CoreUI's source code. Copy and paste variables as needed, modify their values, and remove the !default
flag. If a variable has already been assigned, then it won't be re-assigned by the default values in CoreUI.
You will find the complete list of CoreUI's variables in node_modules/@coreui/coreui/scss/_variables.scss
or in node_modules/@coreui/coreui-pro/scss/_variables.scss
. Some variables are set to null
, these variables don't output the property unless they are overridden in your configuration. You can also find a specific component variables list in Customizing section ex. Alerts - Customizing
Here's an example that changes the background-color
and color
for the <body>
when importing and compiling CoreUI for React via npm:
1// _variables.scss23// Default variable overrides4$body-bg: #000;5$body-color: #111;
In your custom.scss
, you can put custom code for CoreUI's components or your own styles.
1// _custom.scss23// Additional custom code here4.custom-component {5 border: 2px solid #222;6}