How to integrate CoreUI with React for enterprise apps
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Building enterprise-level applications requires a robust architecture, consistent UI, and scalable components that can handle complex data flows. With over 25 years of experience in software development and as the creator of CoreUI, I have designed our React library specifically to meet these professional requirements. Since 2014, I have focused on refining React and Node.js ecosystems to ensure they meet the rigorous standards of corporate environments. Integrating CoreUI with React provides a battle-tested foundation that simplifies state management and UI consistency across large teams.
Install the @coreui/react package and its styles to gain access to a comprehensive suite of enterprise-ready components.
Initial Project Setup
The first step in any enterprise integration is establishing a clean dependency tree and importing the necessary style definitions. Enterprise apps often require a global theme that can be customized across multiple modules.
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
// Import CoreUI CSS or SCSS for enterprise customization
import '@coreui/coreui/dist/css/coreui.min.css'
const container = document.getElementById('root')
const root = createRoot(container)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)
In this setup, we import the minified CSS directly. For production apps, I recommend using the SCSS source files to leverage variables for brand-specific theming. This ensures that every component follows your corporate identity from the start.
Architecting the Dashboard Layout
Enterprise applications usually follow a standard shell pattern: a Sidebar for navigation, a Header for user controls, and a content area for views.
import React from 'react'
import {
CContainer,
CSidebar,
CSidebarBrand,
CSidebarNav,
CNavItem,
CHeader,
CHeaderNav,
CHeaderToggler,
CFooter
} from '@coreui/react'
const DefaultLayout = ({ children }) => {
return (
<div>
<CSidebar unfoldable>
<CSidebarBrand>Enterprise OS</CSidebarBrand>
<CSidebarNav>
<CNavItem href='#'>Dashboard</CNavItem>
<CNavItem href='#'>Inventory</CNavItem>
<CNavItem href='#'>Reports</CNavItem>
</CSidebarNav>
</CSidebar>
<div className='wrapper d-flex flex-column min-vh-100'>
<CHeader className='mb-4'>
<CContainer fluid>
<CHeaderToggler />
<CHeaderNav className='ms-auto'>
<CNavItem href='#'>Settings</CNavItem>
</CHeaderNav>
</CContainer>
</CHeader>
<div className='body flex-grow-1 px-3'>
<CContainer fluid>
{children}
</CContainer>
</div>
<CFooter>
<div>CoreUI © 2026</div>
</CFooter>
</div>
</div>
)
}
export default DefaultLayout
This layout provides a sticky sidebar and a flexible content area. In my experience, using a min-vh-100 wrapper is critical to ensure the Footer stays at the bottom even when the page content is sparse, which is a common requirement in data-entry screens.
Data Management with Smart Table
Large-scale apps live and die by how they display data. The CoreUI Smart Table is a PRO component specifically built for enterprise scenarios involving thousands of rows and complex filtering. It requires the @coreui/react-pro package.
import React from 'react'
import { CSmartTable } from '@coreui/react-pro'
const UserManagementTable = ({ users }) => {
const columns = [
{ key: 'name', _style: { width: '40%' } },
'registered',
{ key: 'role', filter: false, sorter: false },
{ key: 'status', _style: { width: '20%' } }
]
return (
<CSmartTable
items={users}
columns={columns}
columnFilter
footer
itemsPerPageSelect
itemsPerPage={10}
pagination
scopedColumns={{
status: (item) => (
<td>{item.status.toUpperCase()}</td>
)
}}
/>
)
}
The CSmartTable handles sorting, filtering, and pagination internally, which reduces the amount of boilerplate code your team needs to write. For complex data types, you might need to convert a string to lowercase in JavaScript before performing custom filtering logic.
Advanced Form Validation
Enterprise forms often involve complex business logic and multiple validation layers. CoreUI provides components that integrate seamlessly with React’s state to handle Validation feedback.
import React, { useState } from 'react'
import { CForm, CFormInput, CFormFeedback, CButton, CCol } from '@coreui/react'
const EnterpriseForm = () => {
const [validated, setValidated] = useState(false)
const handleSubmit = (event) => {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
setValidated(true)
}
return (
<CForm
className='row g-3 needs-validation'
noValidate
validated={validated}
onSubmit={handleSubmit}
>
<CCol md={6}>
<CFormInput
type='text'
label='Employee ID'
required
/>
<CFormFeedback invalid>Valid ID is required.</CFormFeedback>
</CCol>
<CCol md={6}>
<CFormInput
type='email'
label='Corporate Email'
required
/>
<CFormFeedback invalid>A valid email is required.</CFormFeedback>
</CCol>
<CCol xs={12}>
<CButton color='primary' type='submit'>
Submit Entry
</CButton>
</CCol>
</CForm>
)
}
By leveraging the validated prop, you provide immediate visual feedback to the user. This is particularly important when managing financial data where you may need to format a number as currency in JavaScript for precise display in the input fields.
Implementing Reactive Modals
In a dashboard, detail views are frequently handled via a Modal to keep the user in context. CoreUI modals are accessible and fully customizable.
import React, { useState } from 'react'
import { CModal, CModalHeader, CModalTitle, CModalBody, CModalFooter, CButton } from '@coreui/react'
const DetailModal = ({ visible, setVisible, data }) => {
return (
<CModal visible={visible} onClose={() => setVisible(false)}>
<CModalHeader>
<CModalTitle>System Report</CModalTitle>
</CModalHeader>
<CModalBody>
<p>Generated on: {data.timestamp}</p>
<pre>{JSON.stringify(data, null, 2)}</pre>
</CModalBody>
<CModalFooter>
<CButton color='secondary' onClick={() => setVisible(false)}>Close</CButton>
<CButton color='primary'>Export PDF</CButton>
</CModalFooter>
</CModal>
)
}
Using the visible prop allows you to control the modal state from a parent component. This pattern is ideal for showing logs or audit trails where you might need to get the current date in JavaScript to timestamp the record generation.
Data Visualization Integration
Enterprise dashboards are incomplete without analytics. CoreUI provides pre-styled wrappers for Chart.js that automatically adapt to your application’s theme.
import React from 'react'
import { CChartBar } from '@coreui/react-chartjs'
const RevenueChart = () => {
return (
<CChartBar
data={{
labels: ['Jan', 'Feb', 'Mar', 'Apr'],
datasets: [
{
label: 'Sales 2026',
backgroundColor: '#321fdb',
data: [40, 20, 12, 39],
},
],
}}
options={{
plugins: {
legend: { display: true }
},
maintainAspectRatio: false
}}
/>
)
}
These charts are responsive by default. For a faster start with pre-integrated analytics and full-featured layouts, I recommend using our React Dashboard Template, which includes these charts and more advanced plugins ready for production.
Best Practice Note:
When scaling for enterprise, always favor the CoreUI SCSS source over the compiled CSS. This allows you to override default variables for spacing, typography, and colors without adding unnecessary CSS overrides. We use this exact modular approach in CoreUI PRO components to maintain high performance and clean codebases in large-scale deployments.
