Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

React Widgets

Widgets

React widget components give information about the app statistics.

On this page

CWidgetStatsA#

$9.000 (40.9% )

Widget title

$9.000 (40.9% )

Widget title

$9.000 (40.9% )

Widget title

$9.000 (40.9% )

Widget title

<CRow>
  <CCol sm={6}>
    <CWidgetStatsA
      className="mb-4"
      color="primary"
      value={
        <>
          $9.000{' '}
          <span className="fs-6 fw-normal">
            (40.9% <CIcon icon={cilArrowTop} />)
          </span>
        </>
      }
      title="Widget title"
      action={
        <CDropdown alignment="end">
          <CDropdownToggle color="transparent" caret={false} className="p-0">
            <CIcon icon={cilOptions} className="text-white" />
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
            <CDropdownItem>Something else here...</CDropdownItem>
            <CDropdownItem disabled>Disabled action</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      }
      chart={
        <CChartLine
          className="mt-3 mx-3"
          style={{ height: '70px' }}
          data={{
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                label: 'My First dataset',
                backgroundColor: 'transparent',
                borderColor: 'rgba(255,255,255,.55)',
                pointBackgroundColor: '#5856d6',
                data: [65, 59, 84, 84, 51, 55, 40],
              },
            ],
          }}
          options={{
            plugins: {
              legend: {
                display: false,
              },
            },
            maintainAspectRatio: false,
            scales: {
              x: {
                border: {
                  display: false,
                },
                grid: {
                  display: false,
                  drawBorder: false,
                },
                ticks: {
                  display: false,
                },
              },
              y: {
                min: 30,
                max: 89,
                display: false,
                grid: {
                  display: false,
                },
                ticks: {
                  display: false,
                },
              },
            },
            elements: {
              line: {
                borderWidth: 1,
                tension: 0.4,
              },
              point: {
                radius: 4,
                hitRadius: 10,
                hoverRadius: 4,
              },
            },
          }}
        />
      }
    />
  </CCol>
  <CCol sm={6}>
    <CWidgetStatsA
      className="mb-4"
      color="info"
      value={
        <>
          $9.000{' '}
          <span className="fs-6 fw-normal">
            (40.9% <CIcon icon={cilArrowTop} />)
          </span>
        </>
      }
      title="Widget title"
      action={
        <CDropdown alignment="end">
          <CDropdownToggle color="transparent" caret={false} className="p-0">
            <CIcon icon={cilOptions} className="text-white" />
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
            <CDropdownItem>Something else here...</CDropdownItem>
            <CDropdownItem disabled>Disabled action</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      }
      chart={
        <CChartLine
          className="mt-3 mx-3"
          style={{ height: '70px' }}
          data={{
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                label: 'My First dataset',
                backgroundColor: 'transparent',
                borderColor: 'rgba(255,255,255,.55)',
                pointBackgroundColor: '#39f',
                data: [1, 18, 9, 17, 34, 22, 11],
              },
            ],
          }}
          options={{
            plugins: {
              legend: {
                display: false,
              },
            },
            maintainAspectRatio: false,
            scales: {
              x: {
                border: {
                  display: false,
                },
                grid: {
                  display: false,
                  drawBorder: false,
                },
                ticks: {
                  display: false,
                },
              },
              y: {
                min: -9,
                max: 39,
                display: false,
                grid: {
                  display: false,
                },
                ticks: {
                  display: false,
                },
              },
            },
            elements: {
              line: {
                borderWidth: 1,
              },
              point: {
                radius: 4,
                hitRadius: 10,
                hoverRadius: 4,
              },
            },
          }}
        />
      }
    />
  </CCol>
  <CCol sm={6}>
    <CWidgetStatsA
      className="mb-4"
      color="warning"
      value={
        <>
          $9.000{' '}
          <span className="fs-6 fw-normal">
            (40.9% <CIcon icon={cilArrowTop} />)
          </span>
        </>
      }
      title="Widget title"
      action={
        <CDropdown alignment="end">
          <CDropdownToggle color="transparent" caret={false} className="p-0">
            <CIcon icon={cilOptions} className="text-white" />
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
            <CDropdownItem>Something else here...</CDropdownItem>
            <CDropdownItem disabled>Disabled action</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      }
      chart={
        <CChartLine
          className="mt-3"
          style={{ height: '70px' }}
          data={{
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                label: 'My First dataset',
                backgroundColor: 'rgba(255,255,255,.2)',
                borderColor: 'rgba(255,255,255,.55)',
                data: [78, 81, 80, 45, 34, 12, 40],
                fill: true,
              },
            ],
          }}
          options={{
            plugins: {
              legend: {
                display: false,
              },
            },
            maintainAspectRatio: false,
            scales: {
              x: {
                display: false,
              },
              y: {
                display: false,
              },
            },
            elements: {
              line: {
                borderWidth: 2,
                tension: 0.4,
              },
              point: {
                radius: 0,
                hitRadius: 10,
                hoverRadius: 4,
              },
            },
          }}
        />
      }
    />
  </CCol>
  <CCol sm={6}>
    <CWidgetStatsA
      className="mb-4"
      color="danger"
      value={
        <>
          $9.000{' '}
          <span className="fs-6 fw-normal">
            (40.9% <CIcon icon={cilArrowTop} />)
          </span>
        </>
      }
      title="Widget title"
      action={
        <CDropdown alignment="end">
          <CDropdownToggle color="transparent" caret={false} className="p-0">
            <CIcon icon={cilOptions} className="text-white" />
          </CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
            <CDropdownItem>Something else here...</CDropdownItem>
            <CDropdownItem disabled>Disabled action</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      }
      chart={
        <CChartBar
          className="mt-3 mx-3"
          style={{ height: '70px' }}
          data={{
            labels: [
              'January',
              'February',
              'March',
              'April',
              'May',
              'June',
              'July',
              'August',
              'September',
              'October',
              'November',
              'December',
              'January',
              'February',
              'March',
              'April',
            ],
            datasets: [
              {
                label: 'My First dataset',
                backgroundColor: 'rgba(255,255,255,.2)',
                borderColor: 'rgba(255,255,255,.55)',
                data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
                barPercentage: 0.6,
              },
            ],
          }}
          options={{
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              },
            },
            scales: {
              x: {
                grid: {
                  display: false,
                  drawTicks: false,
                },
                ticks: {
                  display: false,
                },
              },
              y: {
                border: {
                  display: false,
                },
                grid: {
                  display: false,
                  drawBorder: false,
                  drawTicks: false,
                },
                ticks: {
                  display: false,
                },
              },
            },
          }}
        />
      }
    />
  </CCol>
</CRow>

CWidgetStatsB#

89.9%

Widget title

Widget helper text

89.9%

Widget title

Widget helper text

<CRow>
  <CCol xs={6}>
    <CWidgetStatsB
      className="mb-3"
      progress={{ color: 'success', value: 75 }}
      text="Widget helper text"
      title="Widget title"
      value="89.9%"
    />
  </CCol>
  <CCol xs={6}>
    <CWidgetStatsB
      className="mb-3"
      color="primary"
      inverse
      progress={{ value: 75 }}
      text="Widget helper text"
      title="Widget title"
      value="89.9%"
    />
  </CCol>
</CRow>

CWidgetStatsC#

89.9%

Widget title

89.9%

Widget title

<CRow>
  <CCol xs={6}>
    <CWidgetStatsC
      className="mb-3"
      icon={<CIcon icon={cilChartPie} height={36} />}
      progress={{ color: 'success', value: 75 }}
      text="Widget helper text"
      title="Widget title"
      value="89.9%"
    />
  </CCol>
  <CCol xs={6}>
    <CWidgetStatsC
      className="mb-3"
      icon={<CIcon icon={cilChartPie} height={36} />}
      color="primary"
      inverse
      progress={{ value: 75 }}
      text="Widget helper text"
      title="Widget title"
      value="89.9%"
    />
  </CCol>
</CRow>

CWidgetStatsD#

89K

friends

459

feeds

973K

folowers

1.792

tweets

<CRow>
  <CCol xs={6}>
    <CWidgetStatsD
      className="mb-3"
      icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
      chart={
        <CChartLine
          className="position-absolute w-100 h-100"
          data={{
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                backgroundColor: 'rgba(255,255,255,.1)',
                borderColor: 'rgba(255,255,255,.55)',
                pointHoverBackgroundColor: '#fff',
                borderWidth: 2,
                data: [65, 59, 84, 84, 51, 55, 40],
                fill: true,
              },
            ],
          }}
          options={{
            elements: {
              line: {
                tension: 0.4,
              },
              point: {
                radius: 0,
                hitRadius: 10,
                hoverRadius: 4,
                hoverBorderWidth: 3,
              },
            },
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              },
            },
            scales: {
              x: {
                display: false,
              },
              y: {
                display: false,
              },
            },
          }}
        />
      }
      style={{ '--cui-card-cap-bg': '#3b5998' }}
      values={[
        { title: 'friends', value: '89K' },
        { title: 'feeds', value: '459' },
      ]}
    />
  </CCol>
  <CCol xs={6}>
    <CWidgetStatsD
      className="mb-3"
      icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
      chart={
        <CChartLine
          className="position-absolute w-100 h-100"
          data={{
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                backgroundColor: 'rgba(255,255,255,.1)',
                borderColor: 'rgba(255,255,255,.55)',
                pointHoverBackgroundColor: '#fff',
                borderWidth: 2,
                data: [1, 13, 9, 17, 34, 41, 38],
                fill: true,
              },
            ],
          }}
          options={{
            elements: {
              line: {
                tension: 0.4,
              },
              point: {
                radius: 0,
                hitRadius: 10,
                hoverRadius: 4,
                hoverBorderWidth: 3,
              },
            },
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              },
            },
            scales: {
              x: {
                display: false,
              },
              y: {
                display: false,
              },
            },
          }}
        />
      }
      style={{ '--cui-card-cap-bg': '#00aced' }}
      values={[
        { title: 'folowers', value: '973K' },
        { title: 'tweets', value: '1.792' },
      ]}
    />
  </CCol>
</CRow>

CWidgetStatsE#

Widget title

89.9%

Widget title

89.9%

<CRow>
  <CCol xs={6}>
    <CWidgetStatsE
      className="mb-3"
      chart={
        <CChartBar
          className="mx-auto"
          style={{ height: '40px', width: '80px' }}
          data={{
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
            datasets: [
              {
                backgroundColor: '#321fdb',
                borderColor: 'transparent',
                borderWidth: 1,
                data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
              },
            ],
          }}
          options={{
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              },
            },
            scales: {
              x: {
                display: false,
              },
              y: {
                display: false,
              },
            },
          }}
        />
      }
      title="Widget title"
      value="89.9%"
    />
  </CCol>
  <CCol xs={6}>
    <CWidgetStatsE
      className="mb-3"
      chart={
        <CChartLine
          className="mx-auto"
          style={{ height: '40px', width: '80px' }}
          data={{
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
            datasets: [
              {
                backgroundColor: 'transparent',
                borderColor: '#321fdb',
                borderWidth: 2,
                data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
              },
            ],
          }}
          options={{
            maintainAspectRatio: false,
            elements: {
              line: {
                tension: 0.4,
              },
              point: {
                radius: 0,
              },
            },
            plugins: {
              legend: {
                display: false,
              },
            },
            scales: {
              x: {
                display: false,
              },
              y: {
                display: false,
              },
            },
          }}
        />
      }
      title="Widget title"
      value="89.9%"
    />
  </CCol>
</CRow>

CWidgetStatsF#

89.9%

Widget title

89.9%

Widget title

89.9%

Widget title

89.9%

Widget title

89.9%

Widget title

89.9%

Widget title

<CRow>
    <CCol xs={6}>
      <CWidgetStatsF
        className="mb-3"
        color="primary"
        icon={<CIcon icon={cilChartPie} height={24} />}
        title="Widget title"
        value="89.9%"/>
    </CCol>
    <CCol xs={6}>
      <CWidgetStatsF
        className="mb-3"
        color="warning"
        icon={<CIcon icon={cilChartPie} height={24} />}
        title="Widget title"
        value="89.9%"/>
    </CCol>
  </CRow>
  <CRow>
    <CCol xs={6}>
      <CWidgetStatsF
        className="mb-3"
        color="primary"
        icon={<CIcon icon={cilChartPie} height={24} />}
        padding={false}
        title="Widget title"
        value="89.9%"/>
    </CCol>
    <CCol xs={6}>
      <CWidgetStatsF
        className="mb-3"
        color="warning"
        icon={<CIcon icon={cilChartPie} height={24} />}
        padding={false}
        title="Widget title"
        value="89.9%"/>
    </CCol>
  </CRow>
    <CRow>
    <CCol xs={6}>
      <CWidgetStatsF
        className="mb-3"
        color="primary"
        footer={
          <CLink
            className="font-weight-bold font-xs text-body-secondary"
            href="https://coreui.io/"
            rel="noopener norefferer"
            target="_blank"
          >
            View more
            <CIcon icon={cilArrowRight} className="float-end" width={16} />
          </CLink>
        }
        icon={<CIcon icon={cilChartPie} height={24} />}
        title="Widget title"
        value="89.9%"/>
    </CCol>
    <CCol xs={6}>
      <CWidgetStatsF
        className="mb-3"
        color="warning"
        footer={
          <CLink
            className="font-weight-bold font-xs text-body-secondary"
            href="https://coreui.io/"
            rel="noopener norefferer"
            target="_blank"
          >
            View more
            <CIcon icon={cilArrowRight} className="float-end" width={16} />
          </CLink>
        }
        icon={<CIcon icon={cilChartPie} height={24} />}
        title="Widget title"
        value="89.9%"/>
    </CCol>
  </CRow>

API#

CWidgetStatsA#

import { CWidgetStatsA } from '@coreui/react'
// or
import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'

Property	Description	Type	Default
action	Action node for your component.	`ReactNode`	-
chart	Chart node for your component.	`ReactNode`	-
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
title	Title node for your component.	`ReactNode`	-
value	Value node for your component.	`ReactNode`	-

CWidgetStatsB#

import { CWidgetCWidgetStatsB } from '@coreui/react'
// or
import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
inverse	Colors have been inverted from their default dark shade.	`boolean`	-
progress	Sets the color context of the progress bar to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
text	Helper text for your component.	`string`	-
title	Title node for your component.	`ReactNode`	-
value	Value node for your component.	`ReactNode`	-

CWidgetStatsC#

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

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
icon	Icon node for your component.	`ReactNode`	-
inverse	Colors have been inverted from their default dark shade.	`boolean`	-
progress	Sets the color context of the progress bar to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
title	Title node for your component.	`ReactNode`	-
value	Value node for your component.	`ReactNode`	-

CWidgetStatsD#

import { CWidgetStatsD } from '@coreui/react'
// or
import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'

Property	Description	Type	Default
chart	Chart node for your component.	`ReactNode`	-
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
icon	Icon node for your component.	`ReactNode`	-
values	Values and titles for your component.	`Value[]`	-

CWidgetStatsE#

import { CWidgetStatsE } from '@coreui/react'
// or
import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'

Property	Description	Type	Default
chart	Chart node for your component.	`ReactNode`	-
className	A string of all className you want applied to the base component.	`string`	-
title	Title node for your component.	`ReactNode`	-
value	Value node for your component.	`ReactNode`	-

CWidgetStatsF#

import { CWidgetStatsF } from '@coreui/react'
// or
import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
footer	Footer node for your component.	`ReactNode`	-
icon	Icon node for your component.	`ReactNode`	-
padding	Set padding of your component.	`boolean`	true
title	Title node for your component.	`ReactNode`	-
value	Value node for your component.	`ReactNode`	-