coreui / coreui-react

CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.

CoreUI

Open Source UI Components Library built on top of Bootstrap 5.
Explore CoreUI docs »

Report bug · Request feature · Blog

Table of contents

• Table of contents
• Quick start
• Status
• What's included
• Bugs and feature requests
• Documentation
• Frameworks
• Templates
• Contributing
• Community
• Versioning
• Creators
• Thanks
• Support CoreUI Development
• Copyright and license

Quick start

Several quick start options are available:

• Download the latest release
• Clone the repo: git clone https://github.com/coreui/coreui.git
• Install with npm: npm install @coreui/coreui
• Install with yarn: yarn add @coreui/coreui
• Install with Composer: composer require coreui/coreui:5.0.0

Read the Getting started page for information on the framework contents, templates and examples, and more.

Status

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

coreui/
├── css/
│   ├── coreui-grid.css
│   ├── coreui-grid.css.map
│   ├── coreui-grid.min.css
│   ├── coreui-grid.min.css.map
│   ├── coreui-grid.rtl.css
│   ├── coreui-grid.rtl.css.map
│   ├── coreui-grid.rtl.min.css
│   ├── coreui-grid.rtl.min.css.map
│   ├── coreui-reboot.css
│   ├── coreui-reboot.css.map
│   ├── coreui-reboot.min.css
│   ├── coreui-reboot.min.css.map
│   ├── coreui-reboot.rtl.css
│   ├── coreui-reboot.rtl.css.map
│   ├── coreui-reboot.rtl.min.css
│   ├── coreui-reboot.rtl.min.css.map
│   ├── coreui-utilities.css
│   ├── coreui-utilities.css.map
│   ├── coreui-utilities.min.css
│   ├── coreui-utilities.min.css.map
│   ├── coreui-utilities.rtl.css
│   ├── coreui-utilities.rtl.css.map
│   ├── coreui-utilities.rtl.min.css
│   ├── coreui-utilities.rtl.min.css.map
│   ├── coreui.css
│   ├── coreui.css.map
│   ├── coreui.min.css
│   ├── coreui.min.css.map
│   ├── coreui.rtl.css
│   ├── coreui.rtl.css.map
│   ├── coreui.rtl.min.css
│   └── coreui.rtl.min.css.map
└── js/
    ├── coreui.bundle.js
    ├── coreui.bundle.js.map
    ├── coreui.bundle.min.js
    ├── coreui.bundle.min.js.map
    ├── coreui.esm.js
    ├── coreui.esm.js.map
    ├── coreui.esm.min.js
    ├── coreui.esm.min.js.map
    ├── coreui.js
    ├── coreui.js.map
    ├── coreui.min.js
    └── coreui.min.js.map

We provide compiled CSS and JS (coreui.*), as well as compiled and minified CSS and JS (coreui.min.*). source maps (coreui.*.map) are available for use with certain browsers' developer tools. Bundled JS files (coreui.bundle.js and minified coreui.bundle.min.js) include Popper.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

The documentation for the CoreUI & CoreUI PRO is hosted at our website CoreUI

Running documentation locally

1. Run npm install to install the Node.js dependencies, including Hugo (the site builder).
2. Run npm run test (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root /coreui directory, run npm run docs-serve in the command line.
4. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Frameworks

CoreUI supports most popular frameworks.

• CoreUI for Angular
• CoreUI for Bootstrap (Vanilla JS)
• CoreUI for React
• CoreUI for Vue

Templates

Fully featured, out-of-the-box, templates for your application based on CoreUI.

• Angular Admin Template
• Bootstrap Admin Template
• React Admin Template
• Vue Admin Template

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.

• Read and subscribe to The Official CoreUI Blog.
• Follow @core_ui on Twitter.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Łukasz Holeczek

• https://twitter.com/lukaszholeczek
• https://github.com/mrholek

Andrzej Kopański

• https://github.com/xidedix

CoreUI Team

• https://twitter.com/core_ui
• https://github.com/coreui
• https://github.com/orgs/coreui/people

Thanks

CoreUI is designed as the extension of Bootstrap. Special thanks for Bootstrap team and Bootstrap's contributors.

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 development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.

Copyright and license

Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the MIT License. Docs released under Creative Commons.

coreui-react's Issues

AppSwitch does not provide any keyboard accessibility

This code does not work as expected:

<AppSwitch tabIndex="0" variant="pill" color="primary"
  checked={isChecked} onChange={this.handleChange}/>

Actual result:

• tabIndex is rendered on the <input> which has display: none.
• This does not work in any browser I've tested, the control is skipped entirely in the tab order.

Desired result:

• tabIndex should be rendered on the wrapped <label>.
• Keyboard support per ARIA checkbox guidelines should be implemented (pressing Space or Enter should toggle the switch)

date time picker

can anyone comment if this date time picker is part of the coreui lib?

http://coreui.platform.ims.io/styleguide/components/date-time-picker-input

How to toggle light/dark theme?

I see that there was a question about enabling the dark theme, but how would one go about making that a toggleable feature? So then users could choose light or dark.

SidebarNav: example of how to implement progress bar in SidebarNav?

The demo shows progress bars within the sidebar under system utilization. I was wondering how can I embed JSX render for the progress bars similar to the demo? The examples shown in the README shows how to change the element tag, but I was wondering if there was a way to embed a component such as the progress bar?

Warm regards,
Max

Enable for server-side rendering.

element-closest dependency makes your package incompatible with server side rendering

element-closest causes issues in isomorphic application

The package element-closest causes issues in an isomorphic application because the server does not have window.Element.

There is a fix which makes element-closest a no-op on the server side ->
"element-closest": "github:ptolemybarnes/closest",

Can I have access to private Pro repository after buying a license ?

My company has bought Pro license and we received link to zip archive. But updating via unpacking zip archives isn't convenient, it'll be better to connect Pro repository to project. Can I have access to Pro repo?

Upgrade to reactstrap 8

We'd love to be able to use the new Toast component in reactstrap 8 but it looks like coreui-react only works with reactstrap 7.

Toggle Dark Mode

Hi,

If anybody did please let me know on how to do it? Like have a button from which we can just toggle dark and light mode?

Regards,
Jay

How to switch Pro version to "Alba" colors?

We purchased CoreUI Pro React.js and it is working well for us. Instead of the default SideBar with the dark background, we would like to use the colors in the SideBar version in the "Alba" template that has the white background. Do we need to purchase the Alba React.js Admin Template also or is there a way to easily switch to the Alba colors?

RTL support for InputGroupAddon, etc

When you change to RTL support by adding "rtl" to dir property in the HTML tag, it does switch all text, but inputgroupaddons and split elements do not render properly. They are not repositioned properly.

Server Side Rendering

@coreui\react\lib\Shared\layout\layout.js
document is not defined.how to solve it?

How to upgrade to version 2.0+?

Hello.
We are using [email protected] for a very long time. I see that you published a new major version, is there any upgrade guide for that?

Thanks.

Accordion react-bootstrap bug

Hello,

I just want let you know there is a little bug with coreui react and accordion of react-bootstrap.
Have a look:

SidebarNav - subcomponent: item

I'm using SidebarNav, implement a navConfig strutured as the document show us. But I'd like to use "target: '_blank'" in a item to open the link in a new tab. How could I do that?

Documentation of react components?

Hello,

can you please point to the documentation of the ReactJs components of coreUI. I looked around (https://coreui.io/docs) but there is no mention of the react components.

Shared module missing default export for _AppLayout

coreui-react/src/Shared/index.js

Line 2 in 6aec9d8

AppSidebarNav is possible collapse only one each time?

I need to when I click in one button with children open them and close other I already clicked.

data-size LaddaButton don't work

Property data-size dont work in react

<LaddaButton className="btn btn-success btn-ladda" loading={this.state.expLeft} onClick={() => this.toggle('expLeft')} data-color="green" data-style={EXPAND_LEFT} data-size={XS}> Consultar </LaddaButton>

Visual Studio Start Up

I have just bought the Pro version. Is there any quick start Visual Studio GitHub project that I can download and quickly understand (and apply) CoreUI? I am having a hard time identifying and downloading all the packages and components and npm packages. I still haven't have any success getting CoreUI to run on Visual Studio. Am begining to think this is a bad decision. It will be very useful if you have a git project I can just download and see how it works. Thanks

Remove sidebar Toggler button from AppHeader

Greetings! You did an excellent template.

My app doesn't need to show the sidebar toggler button in large/medium screens. I was thinking I can achieve this with a prop, but doesn't work. Something like this:

<AppHeader sidebarToggler={false} fixed> ... </AppHeader>

how can I remove it?

2.0.1 breaks app: Module not found (coreui-utilities)

After updating to 2.0.1, my React app no longer builds. I get this error:
Module not found: Can't resolve '@coreui/coreui/dist/js/coreui-utilities in Dashboard.js
I verified that coreui-utilities is not present.
I tried removing node_modules and reinstalling, but that did not help.
When I revert back to 2.0.0 the problem goes away.

pathname undefined when load children

add tooltip to sidebar nav link

Is it possible to add tooltip to a sidebar nav link ?

AppLayout module not found warning

First of all, thanks for this awesome project!
I'm getting this warning when importing this project as ES module.

WARNING in ./node_modules/@coreui/react/es/index.js
32:0-35 "export 'default' (reexported as 'AppLayout') was not found in './Shared'

It looks like the Shared module is missing a default export.

Uncaught TypeError: Cannot read property 'setTargetNode' of undefined

I am getting this issue when updating new version of "@coreui/react": "^2.0.8", 2.0.8 is working fine.
So apps breaking because of:
Warning: Failed context type: The context isOpen is marked as required in DropdownToggle, but its value is undefined.
in DropdownToggle
in li (created by Dropdown)
in Manager (created by Dropdown)
in Dropdown (created by AppHeaderDropdown)
in AppHeaderDropdown

Migrate from V1 to V2

My group purchased the product around February. The current version we are at is V1.8.14. Is there any easy migrating guidelines to V2? Thanks :)

How to use custom SVG icons in the SidebarNav?

Hi.

It seems that the component only accepts class names for CSS. But how do I use my own SVG icons?

AppAside

I bought the pro version but the documentation doesn't tell me how to change width of AppAside and how to toggle it with a function, thanks.

AppSwitch does not support boolean values

I've got a CoreUI Pro (Clever) project I'm working on, I'm trying to use an AppSwitch component in a form that updates values from a mongoDB document that has a boolean value in the given field. This would appear to be the primary use case for a Switch, but the "value" prop only supports string values, so I get the error message both when the form is rendered and when the switch is flipped on and off:

Warning: Failed prop type: Invalid prop value of type boolean supplied to AppSwitch, expected string

There does not appear to be any documentation in the docs area about what props do what for AppSwitch.

Please advise the best way to bind a boolean form value to this component.

How do I change body background to an image?

I want to change the body background color to an image. Please tell me how to do it. I tried and I searched on the internet but I didn't get any solution.

Deploying on firebase gives welcome screen

I got this message after deploying app on firebase .

I want to host my app on firebase.

I followed these steps.

1. npm run build and it created build folder
2. firebase init , select hosting ,
3. What do you want to use as your public directory? build
4. Configure as a single-page app (rewrite all urls to /index.html)? Yes
5. File build/index.html already exists. Overwrite? No
6. and then finally firebase deploy
   after sometime I see files uploaded successfully and in firebase hosting dashboard it shows files uploaded something like 727 . but app looks something like a welcome message "Welcome Firebase Hosting Setup Complete . You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!"

however, if I create a react app using create-react-app , and follow same steps , its working fine at same url and host. it display app at once without a problem.

my firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

SidebarNav .indexOf match for active route is too primitive

https://github.com/coreui/coreui-react/blob/master/src/SidebarNav.js#L48

My nav item for "Home" with a route of / is always highlighted. A boolean exact configuration property would work. Just using indexOf seems too primitive.

I'm happy to make a PR implementing exact if you like.

Error in importing

import { DefaultLayout } from '@coreui/react'; this gives me
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. error.

SidebarNav requires location prop

It would be great to add this prop to propTypes object

package.json

"dependencies": {
    "@coreui/coreui": "^2.1.9",
    "@coreui/react": "^2.1.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "..."
  },

Input as `textarea` doesn't show `defaultValue`

Not sure if this is the right place, anyway using defaultValue doesnt show text at all.

<Input  type="textarea"  id="textarea" name="description" defaultValue={"anything"} />

how to give click function for AppSidebarNav

Always getting redirected to /dashboard

Hi,

I bought the PRO version, so I have been using it lately. There is both the complete example and the starter example in the downloaded folder.

I encounter an issue when I try add a second view from the starter example.
I add it both to routes.js and _nav.js. The issue is that everytime I click on it from the navigation panel I get redirected to /dashboard.

And when I check with the developer mode I can see that in the complete example there is a PUSH action in the history while in the starter example there is a REPLACE.

I'm still digging into it, I'll keep you updated.

Need to change asidemenutoggler

Greetings! It's excellent template.
I need to change asidemenutoggler with notification badge.
How to do this?
Thanks

Core UI React is not working in Next JS project

Core UI React is not working in Next JS project, because it has so many document and classList reference inside the react shared layout. These doesn't work with Server Side Rendering from Next JS.

Cannot read property 'classList' of undefined
TypeError: Cannot read property 'classList' of undefined
    at Object.<anonymous> (D:\Documents\GitHub\inviteman\node_modules\@coreui\react\lib\Shared\layout\layout.js:58:41)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\Documents\GitHub\inviteman\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (D:\Documents\GitHub\inviteman\node_modules\@coreui\react\lib\Sidebar.js:27:15)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\Documents\GitHub\inviteman\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

[Error] ./node_modules/@coreui/coreui/dist/js/coreui.min.js Module not found:

I'm getting this warning when try to import coreui js:

./node_modules/@coreui/coreui/dist/js/coreui.min.js
Module not found: Can't resolve 'perfect-scrollbar' in '/media/oem/76B0B2F5B0B2BAC7/Sunny/dg2/project/DG2/SourceCode/Web/dg2/node_modules/@coreui/coreui/dist/js'

Multiple AppAside instances

I would like to have multiple AppAsideTogglers that each toggle a separate AppAside instance. How can I achieve this? I can't find much documentation on AppAsides and it seems like they are "global" in that there can only be one AppAside, but I need to have a different AppAside instance for each item that I plan to associate with an AppAsideToggler.

How To Enable Dark Theme

I was buy CoreUI Pro edition, in website said it contains dark theme, I want to use it, how I do it? Is there just change some configuration or something else to use dark theme in react version?

Unable to npm start

Downloaded the PRO edition, did npm install follow by npm start however it fails to start. I did a video to replicate the issue. Please assist: https://youtu.be/bUdxlzh8TLA

Can't override $navbar-brand-width

I need $navbar-brand-width to be 200px

Changing the variable in /scss/core/_variables.scss doesn't seem to do anything:
$navbar-brand-width: 200px !default;

I tried overriding this in /scss/_core-variables but it never changes.

What might I be doing wrong?

Upgrade to React Router 5

I see that you've locked React Router to ~4.3.1. I'm curious why not just upgrade to React Router 5? I'm sure there's a good reason I'm just wondering what it is and what would be required to get React Router upgraded?

How to toggle light/dark theme?

Hi,

If anybody did please let me know on how to do it? Like have a button from which we can just toggle dark and light mode?

Regards,
Jay

Make children configurable

Hi,
could you please make this configurable (not only by checking if available)?
https://github.com/coreui/coreui-react/blob/master/src/SidebarNav.js#L180

Gulp compile error

I use coreui react in the my app with gulp configure.
browserify({
entries: './src/js/App.js',
debug: true
})
// transform ES6 and JSX to ES5 with babelify
.transform(babelify.configure({
presets: ["es2015", "react"]
}))
.transform(browserifyCss, {
minify: true
})
.bundle()
.on('error', gutil.log)
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dist/'));

But when I run gulp then project throw error: /node_modules/react-perfect-scrollbar/dist/css/styles.css:4
.ps {
^

Please helpme,

How to remove # from url??

When I load dashboard it appears as http://localhost:3000/#/dashboard
So How can we remove that # from URL