How to use CoreUI Pro with React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Setting up a high-performance enterprise dashboard requires advanced components like Smart Tables and Multi-Selects that go beyond basic UI kits. As the creator of CoreUI and with over 25 years of software development experience, I’ve designed the Pro version to eliminate the overhead of building complex data-heavy interfaces from scratch. The most efficient and modern solution to use CoreUI Pro with React is to install the @coreui/react-pro package and integrate its enterprise-ready components into your project structure. This approach ensures you receive the latest updates and premium support directly through your standard development workflow.
Install the @coreui/react-pro package and import the enterprise-ready components and styles into your React application.
Installing the Pro Package
CoreUI Pro for React relies on the same intuitive API as the free version but adds a significant layer of functionality.
# Install CoreUI Pro and essential icons
npm install @coreui/react-pro @coreui/icons-react @coreui/icons
# Or using yarn
yarn add @coreui/react-pro @coreui/icons-react @coreui/icons
This installation process pulls the complete suite of premium components into your node_modules. You don’t need to uninstall the free version if you were using it; simply updating your imports from @coreui/react to @coreui/react-pro will unlock the advanced features while maintaining compatibility with your existing layout.
Integrating Global Styles
To ensure the Pro components render correctly, you need to include the CoreUI Pro CSS or SCSS files. Using SCSS is recommended as it allows you to customize the theme variables to match your corporate branding easily.
// src/index.js or src/App.js
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
// Import CoreUI Pro main styles
import '@coreui/coreui-pro/dist/css/coreui.min.css'
// Optional: Import CoreUI icons
import '@coreui/icons/css/all.min.css'
const root = createRoot(document.getElementById('root'))
root.render(
<App />
)
By importing the CSS at the entry point of your application, you ensure that the styles are loaded before any components are rendered. This prevents the “Flash of Unstyled Content” (FOUC) and ensures that all layout utilities and component-specific styles are available globally across your React tree.
Implementing the Smart Table
One of the most powerful features of CoreUI Pro is the Smart Table. It handles sorting, filtering, and pagination out of the box with minimal configuration, saving dozens of hours of manual implementation.
import React from 'react'
import { CSmartTable, CBadge } from '@coreui/react-pro'
const UserTable = () => {
const usersData = [
{ id: 1, name: 'John Doe', role: 'Admin', status: 'Active' },
{ id: 2, name: 'Jane Smith', role: 'User', status: 'Banned' }
]
return (
<CSmartTable
items={usersData}
columnFilter
columnSorter
pagination
itemsPerPage={5}
columns={[
{ key: 'name', _style: { width: '40%' } },
'role',
{ key: 'status', _style: { width: '20%' } }
]}
scopedColumns={{
status: (item) => (
<td>
<CBadge color={item.status === 'Active' ? 'success' : 'danger'}>
{item.status}
</CBadge>
</td>
)
}}
/>
)
}
export default UserTable
In this snippet, we use CSmartTable to display user data. The columnFilter and columnSorter props enable interactive headers, while scopedColumns allows for custom rendering of specific cells, such as adding a CBadge for the status column. This level of abstraction is what differentiates CoreUI Pro from standard UI kits.
Using Advanced Form Components
CoreUI Pro includes sophisticated form controls like the Date Range Picker and Multi-Select, which are essential for modern administrative interfaces.
import React, { useState } from 'react'
import { CDateRangePicker, CFormLabel } from '@coreui/react-pro'
const DateFilter = () => {
const [dateRange, setDateRange] = useState([])
const handleDateChange = (range) => {
setDateRange(range)
console.log('New Range:', range)
}
return (
<div className='mb-3'>
<CFormLabel>Select Date Range</CFormLabel>
<CDateRangePicker
locale='en-US'
onRangeChange={handleDateChange}
footer
/>
</div>
)
}
export default DateFilter
The CDateRangePicker component provides a polished user experience for selecting dates. It integrates seamlessly with React state, allowing you to easily capture the selected range and use it for data fetching or filtering. If you need to manipulate the dates after selection, you might find our guide on how to format date as yyyy-mm-dd in JavaScript particularly useful.
Customizing the Pro Theme
CoreUI Pro ships with an extensive set of SCSS variables for deep customization. For brand-specific theming, import the SCSS source instead of the compiled CSS and override variables before the main import. To learn more about this approach, see our guide on how to customize CoreUI theme in React.
// Override Pro-specific variables
$primary: #6366f1;
$sidebar-bg: #1e293b;
$enable-shadows: true;
// Import CoreUI Pro SCSS source
@import '@coreui/coreui-pro/scss/coreui';
This gives you full control over every visual aspect of the Pro components while keeping your overrides in a single, maintainable file. The SCSS approach is recommended for production applications where brand consistency is critical.
Best Practice Note:
For the fastest possible start, I highly recommend using our React Dashboard Template. It comes pre-configured with the Pro components, an optimized folder structure, and a robust build system. This is the exact foundation we use when building high-end client projects at CoreUI, as it ensures all components are correctly integrated with the layout and navigation systems from day one.
