@coreui/react v3 for CoreUI 3 for NEXT.js
next.js project template:
https://github.com/igal-abachi-dev/next10-coreui-test
admin template:
https://github.com/coreui/coreui-free-react-admin-template
Before installation you need to install node and npm on your machine.
local:
copy coreui-nextjs-3.4.6.tgz from here to near project files
npm install file:coreui-nextjs-3.4.6.tgz
from cdn:
npm install http://0.0.0.0/coreui-nextjs-3.4.6uses npm packages:
coreui-icons-nextjs-1.1.0.tgz , from here:
https://github.com/igal-abachi-dev/coreui-icons-next10
coreui-nextjs-3.4.6.tgz
https://github.com/igal-abachi-dev/coreui-next10
inside index.tsx
import {
CBreadcrumbRouter,
CContainer,
CHeader,
CSidebar
} from '@coreui/nextjs';
<div className={'c-app c-default-layout'}>
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
{/* <CSidebar/>*/}
<div className={'c-wrapper c-fixed-components'}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico"/>
</Head>
{/*<CHeader withSubheader>*/}
<div className={'c-body'}>
<main className={'c-main'}>
<CContainer fluid>
<div className={'fade-in'}>
also in globals.scss:
@import "~@coreui/coreui-pro/dist/css/coreui.min.css";
@import "~@coreui/nextjs/es/styles.css";
default styles in globals.scss:
html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
}
a {
text-decoration: none;
background-color: transparent;
color: #321fdb
}
@media (hover: hover),(-ms-high-contrast: none) {
a:hover {
text-decoration: underline;
color: #321fdb
}
}
a:not([href]) {
color: inherit;
text-decoration: none
}
@media (hover: hover),(-ms-high-contrast: none) {
a:not([href]):hover {
color: inherit;
text-decoration: none
}
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 21, 0)
}
body {
padding: 0;
margin: 0;
overflow-x: hidden;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
color: #3c4b64;
background-color: #ebedef
}
on library:
"nwb": "^0.25.2",
"@coreui/icons": "^2.0.0-rc.0",
"@coreui/utils": "~1.3.1",
"@popperjs/core": "^2.9.1",
"classnames": "~2.2.6",
"core-js": "^3.9.1",
"perfect-scrollbar": "~1.5.0",
"react-transition-group": "~4.4.1",
"tippy.js": "^6.3.1"
on project:
"next": "10.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.32.8",
"@coreui/coreui-pro": "^3.4.0",
"@coreui/nextjs": "file:coreui-nextjs-3.4.6.tgz",
- affected components for compatibility with next:
CDataTable.js
CScrollbar.js
CToast.js
CTooltip.js
(used css modules inside node_modules , now refs: there is exported styles.css for all needed styles)
- used react-router-dom , now uses next/router and next/link:
CBreadcrumbRouter.js
CLink.js
CSidebarNavItem.js
- had circular reference with index.js, fixed with local refs:
CProgress.js
CProgressBar.js
CSidebarNavDropdown.js
- used useLayoutEffect() now uses useEffect() in
CDropdownMenu.js
For library guide please visit our Documentation site »
Check out demo of components usage: CoreUI React Admin Template »
Components are styled using @coreui/coreui CSS library, but you can use them also with bootstrap CSS library. That is possible because @coreui/coreui library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem (template components, callout, switch).
Styles have to be imported separately! Import CoreUI CSS library (recommended), or Bootstrap library
Installation:
npm install @coreui/coreuiStyles usage:
@import "~@coreui/coreui/scss/coreui";See the GitHub release history.
See CONTRIBUTING.md.
Some design ideas and solutions in this library inspired by reactstrap library
- bootstrapped with nwb toolkit
package.json is configured with "scripts" we can use with npm run while developing the project.
| Command | Description |
|---|---|
npm test |
run tests |
npm run test:coverage |
run tests and produce a code coverage report in coverage/ |
npm run test:watch |
start a test server and re-run tests on every change |
npm run build |
prepare for publishing to npm |
npm run clean |
delete built resources |