
```jsx
import { CWidgetStatsC } from '@coreui/react'
// or
import CWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cwidgetstatsc-class-name">
        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsc-class-name" aria-label="CWidgetStatsC className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="cwidgetstatsc-color">
        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsc-color" aria-label="CWidgetStatsC color permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
        </td>
      </tr>
      <tr id="cwidgetstatsc-icon">
        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatsc-icon" aria-label="CWidgetStatsC icon permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ReactNode`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Icon node for your component.</p>
        </td>
      </tr>
      <tr id="cwidgetstatsc-inverse">
        <td className="text-primary fw-semibold">inverse<a href="#cwidgetstatsc-inverse" aria-label="CWidgetStatsC inverse permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Colors have been inverted from their default dark shade.</p>
        </td>
      </tr>
      <tr id="cwidgetstatsc-progress">
        <td className="text-primary fw-semibold">progress<a href="#cwidgetstatsc-progress" aria-label="CWidgetStatsC progress permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
        </td>
      </tr>
      <tr id="cwidgetstatsc-title">
        <td className="text-primary fw-semibold">title<a href="#cwidgetstatsc-title" aria-label="CWidgetStatsC title permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ReactNode`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Title node for your component.</p>
        </td>
      </tr>
      <tr id="cwidgetstatsc-value">
        <td className="text-primary fw-semibold">value<a href="#cwidgetstatsc-value" aria-label="CWidgetStatsC value permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ReactNode`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Value node for your component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
