# React Widgets Component API

> Explore the API reference for the React Widget and discover how to effectively utilize its props for customization.

## CWidgetStatsA

```jsx
import { CWidgetStatsA } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

## CWidgetStatsB

```jsx
import { CWidgetStatsB } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

## CWidgetStatsC

```jsx
import { CWidgetStatsC } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

## CWidgetStatsD

```jsx
import { CWidgetStatsD } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

## CWidgetStatsE

```jsx
import { CWidgetStatsE } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

## CWidgetStatsF

```jsx
import { CWidgetStatsF } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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` | `ReactNode` | - | Footer node for your component. |
| `icon` | `ReactNode` | - | Icon node for your component. |
| `padding` | `boolean \| undefined` | `true` | Set padding of your component. |
| `title` | `ReactNode` | - | Title node for your component. |
| `value` | `ReactNode` | - | Value node for your component. |