React Widgets Component API
Widgets API
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. | ||