React Widgets

React widget components give information about the app statistics.

CWidgetStatsA#

<CRow>
<CCol sm={6}>
<CWidgetStatsA
className="mb-4"
color="primary"
value={
<>
$9.000{' '}
<span className="fs-6 fw-normal">
(40.9% <CIcon icon={cilArrowTop} />)
</span>
</>
}
title="Widget title"
action={
<CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChartLine
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#321fdb',
data: [65, 59, 84, 84, 51, 55, 40],
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
min: 30,
max: 89,
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
tension: 0.4,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}}
/>
}
/>
</CCol>
<CCol sm={6}>
<CWidgetStatsA
className="mb-4"
color="info"
value={
<>
$9.000{' '}
<span className="fs-6 fw-normal">
(40.9% <CIcon icon={cilArrowTop} />)
</span>
</>
}
title="Widget title"
action={
<CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChartLine
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#39f',
data: [1, 18, 9, 17, 34, 22, 11],
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
min: -9,
max: 39,
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}}
/>
}
/>
</CCol>
<CCol sm={6}>
<CWidgetStatsA
className="mb-4"
color="warning"
value={
<>
$9.000{' '}
<span className="fs-6 fw-normal">
(40.9% <CIcon icon={cilArrowTop} />)
</span>
</>
}
title="Widget title"
action={
<CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChartLine
className="mt-3"
style={{ height: '70px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
elements: {
line: {
borderWidth: 2,
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
},
},
}}
/>
}
/>
</CCol>
<CCol sm={6}>
<CWidgetStatsA
className="mb-4"
color="danger"
value={
<>
$9.000{' '}
<span className="fs-6 fw-normal">
(40.9% <CIcon icon={cilArrowTop} />)
</span>
</>
}
title="Widget title"
action={
<CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChartBar
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
'January',
'February',
'March',
'April',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
barPercentage: 0.6,
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
},
}}
/>
}
/>
</CCol>
</CRow>

CWidgetStatsB#

89.9%
Widget title
Widget helper text
89.9%
Widget title
Widget helper text
<CRow>
<CCol xs={6}>
<CWidgetStatsB
className="mb-3"
progress={{ color: 'success', value: 75 }}
text="Widget helper text"
title="Widget title"
value="89.9%"
/>
</CCol>
<CCol xs={6}>
<CWidgetStatsB
className="mb-3"
color="primary"
inverse
progress={{ value: 75 }}
text="Widget helper text"
title="Widget title"
value="89.9%"
/>
</CCol>
</CRow>

CWidgetStatsC#

89.9%
Widget title
89.9%
Widget title
<CRow>
<CCol xs={6}>
<CWidgetStatsC
className="mb-3"
icon={<CIcon icon={cilChartPie} height={36} />}
progress={{ color: 'success', value: 75 }}
text="Widget helper text"
title="Widget title"
value="89.9%"
/>
</CCol>
<CCol xs={6}>
<CWidgetStatsC
className="mb-3"
icon={<CIcon icon={cilChartPie} height={36} />}
color="primary"
inverse
progress={{ value: 75 }}
text="Widget helper text"
title="Widget title"
value="89.9%"
/>
</CCol>
</CRow>

CWidgetStatsD#

89K
friends
459
feeds
973K
folowers
1.792
tweets
<CRow>
<CCol xs={6}>
<CWidgetStatsD
className="mb-3"
icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
chart={
<CChartLine
className="position-absolute w-100 h-100"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [65, 59, 84, 84, 51, 55, 40],
fill: true,
},
],
}}
options={{
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
}
style={{ '--cui-card-cap-bg': '#3b5998' }}
values={[
{ title: 'friends', value: '89K' },
{ title: 'feeds', value: '459' },
]}
/>
</CCol>
<CCol xs={6}>
<CWidgetStatsD
className="mb-3"
icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
chart={
<CChartLine
className="position-absolute w-100 h-100"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [1, 13, 9, 17, 34, 41, 38],
fill: true,
},
],
}}
options={{
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
}
style={{ '--cui-card-cap-bg': '#00aced' }}
values={[
{ title: 'folowers', value: '973K' },
{ title: 'tweets', value: '1.792' },
]}
/>
</CCol>
</CRow>

CWidgetStatsE#

Widget title
89.9%
Widget title
89.9%
<CRow>
<CCol xs={6}>
<CWidgetStatsE
className="mb-3"
chart={
<CChartBar
className="mx-auto"
style={{ height: '40px', width: '80px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: '#321fdb',
borderColor: 'transparent',
borderWidth: 1,
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
}
title="Widget title"
value="89.9%"
/>
</CCol>
<CCol xs={6}>
<CWidgetStatsE
className="mb-3"
chart={
<CChartLine
className="mx-auto"
style={{ height: '40px', width: '80px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: '#321fdb',
borderWidth: 2,
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
},
],
}}
options={{
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
}
title="Widget title"
value="89.9%"
/>
</CCol>
</CRow>

CWidgetStatsF#

89.9%
Widget title
89.9%
Widget title
89.9%
Widget title
89.9%
Widget title
89.9%
Widget title
89.9%
Widget title
<CRow>
<CCol xs={6}>
<CWidgetStatsF
className="mb-3"
color="primary"
icon={<CIcon icon={cilChartPie} height={24} />}
title="Widget title"
value="89.9%"/>
</CCol>
<CCol xs={6}>
<CWidgetStatsF
className="mb-3"
color="warning"
icon={<CIcon icon={cilChartPie} height={24} />}
title="Widget title"
value="89.9%"/>
</CCol>
</CRow>
<CRow>
<CCol xs={6}>
<CWidgetStatsF
className="mb-3"
color="primary"
icon={<CIcon icon={cilChartPie} height={24} />}
padding={false}
title="Widget title"
value="89.9%"/>
</CCol>
<CCol xs={6}>
<CWidgetStatsF
className="mb-3"
color="warning"
icon={<CIcon icon={cilChartPie} height={24} />}
padding={false}
title="Widget title"
value="89.9%"/>
</CCol>
</CRow>
<CRow>
<CCol xs={6}>
<CWidgetStatsF
className="mb-3"
color="primary"
footer={
<CLink
className="font-weight-bold font-xs text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon icon={cilArrowRight} className="float-end" width={16} />
</CLink>
}
icon={<CIcon icon={cilChartPie} height={24} />}
title="Widget title"
value="89.9%"/>
</CCol>
<CCol xs={6}>
<CWidgetStatsF
className="mb-3"
color="warning"
footer={
<CLink
className="font-weight-bold font-xs text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon icon={cilArrowRight} className="float-end" width={16} />
</CLink>
}
icon={<CIcon icon={cilChartPie} height={24} />}
title="Widget title"
value="89.9%"/>
</CCol>
</CRow>

API#

CWidgetStatsA#

import { CWidgetStatsA } from '@coreui/react'
// or
import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
PropertyDescriptionTypeDefault
actionAction node for your component.ReactNode-
chartChart node for your component.ReactNode-
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsB#

import { CWidgetCWidgetStatsB } from '@coreui/react'
// or
import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
inverseColors have been inverted from their default dark shade.boolean-
progressSets the color context of the progress bar to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
textHelper text for your component.string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsC#

import { CWidgetStatsCWidgetStatsC } from '@coreui/react'
// or
import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
iconIcon node for your component.ReactNode-
inverseColors have been inverted from their default dark shade.boolean-
progressSets the color context of the progress bar to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsD#

import { CWidgetStatsD } from '@coreui/react'
// or
import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
PropertyDescriptionTypeDefault
chartChart node for your component.ReactNode-
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
iconIcon node for your component.ReactNode-
valuesValues and titles for your component.Value[]-

CWidgetStatsE#

import { CWidgetStatsE } from '@coreui/react'
// or
import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
PropertyDescriptionTypeDefault
chartChart node for your component.ReactNode-
classNameA string of all className you want applied to the base component.string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsF#

import { CWidgetStatsF } from '@coreui/react'
// or
import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
footerFooter node for your component.ReactNode-
iconIcon node for your component.ReactNode-
paddingSet padding of your component.booleantrue
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-