React Widgets Component API
Widgets API
Explore the API reference for the React Widget and discover how to effectively utilize its props for customization.
On this page
import { CWidgetStatsA } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| action | - | ReactNode |
Action node for your component. |
| chart | - | ReactNode |
Chart node for your component. |
| className | - | string, undefined |
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. |
import { CWidgetStatsB } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| className | - | string, undefined |
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, undefined |
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, undefined |
Helper text for your component. |
| title | - | ReactNode |
Title node for your component. |
| value | - | ReactNode |
Value node for your component. |
import { CWidgetStatsC } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| className | - | string, undefined |
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, undefined |
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. |
import { CWidgetStatsD } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| chart | - | ReactNode |
Chart node for your component. |
| className | - | string, undefined |
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[], undefined |
Values and titles for your component. |
import { CWidgetStatsE } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| chart | - | ReactNode |
Chart node for your component. |
| className | - | string, undefined |
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. |
import { CWidgetStatsF } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| className | - | string, undefined |
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 node for your component. |
| icon | - | ReactNode |
Icon node for your component. |
| padding | true | boolean, undefined |
Set padding of your component. |
| title | - | ReactNode |
Title node for your component. |
| value | - | ReactNode |
Value node for your component. |