React Widgets Component API

Widgets API

Rocket
New Year sale. Skyrocket your business in 2025!
Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
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'
// or
import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
PropertyDefaultType
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'
// or
import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'
PropertyDefaultType
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'
// or
import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
PropertyDefaultType
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'
// or
import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
PropertyDefaultType
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'
// or
import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
PropertyDefaultType
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'
// or
import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
PropertyDefaultType
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 node for your component.

icon#-ReactNode

Icon node for your component.

padding#trueboolean

Set padding of your component.

title#-ReactNode

Title node for your component.

value#-ReactNode

Value node for your component.