React Widgets Component API
Widgets API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Widget and discover how to effectively utilize its props for customization.
CWidgetStatsA#
import { CWidgetStatsA } from '@coreui/react'// orimport CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
Property | Default | Type |
---|---|---|
action# | - | ReactNode |
Action node for your component. | ||
chart# | - | ReactNode |
Chart node for your component. | ||
className# | - | string |
A string of all className you want applied to the base component. | ||
color# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
title# | - | ReactNode |
Title node for your component. | ||
value# | - | ReactNode |
Value node for your component. |
CWidgetStatsB#
import { CWidgetCWidgetStatsB } from '@coreui/react'// orimport CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'
Property | Default | Type |
---|---|---|
className# | - | string |
A string of all className you want applied to the base component. | ||
color# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
inverse# | - | boolean |
Colors have been inverted from their default dark shade. | ||
progress# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the progress bar to one of CoreUI’s themed colors. | ||
text# | - | string |
Helper text for your component. | ||
title# | - | ReactNode |
Title node for your component. | ||
value# | - | ReactNode |
Value node for your component. |
CWidgetStatsC#
import { CWidgetStatsCWidgetStatsC } from '@coreui/react'// orimport CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
Property | Default | Type |
---|---|---|
className# | - | string |
A string of all className you want applied to the base component. | ||
color# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
icon# | - | ReactNode |
Icon node for your component. | ||
inverse# | - | boolean |
Colors have been inverted from their default dark shade. | ||
progress# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the progress bar to one of CoreUI’s themed colors. | ||
title# | - | ReactNode |
Title node for your component. | ||
value# | - | ReactNode |
Value node for your component. |
CWidgetStatsD#
import { CWidgetStatsD } from '@coreui/react'// orimport CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
Property | Default | Type |
---|---|---|
chart# | - | ReactNode |
Chart node for your component. | ||
className# | - | string |
A string of all className you want applied to the base component. | ||
color# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
icon# | - | ReactNode |
Icon node for your component. | ||
values# | - | Value[] |
Values and titles for your component. |
CWidgetStatsE#
import { CWidgetStatsE } from '@coreui/react'// orimport CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
Property | Default | Type |
---|---|---|
chart# | - | ReactNode |
Chart node for your component. | ||
className# | - | string |
A string of all className you want applied to the base component. | ||
title# | - | ReactNode |
Title node for your component. | ||
value# | - | ReactNode |
Value node for your component. |
CWidgetStatsF#
import { CWidgetStatsF } from '@coreui/react'// orimport CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
Property | Default | Type |
---|---|---|
className# | - | string |
A string of all className you want applied to the base component. | ||
color# | - | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
footer# | - | ReactNode |
Footer node for your component. | ||
icon# | - | ReactNode |
Icon node for your component. | ||
padding# | true | boolean |
Set padding of your component. | ||
title# | - | ReactNode |
Title node for your component. | ||
value# | - | ReactNode |
Value node for your component. |