React Widgets

React widget components give information about the app statistics.

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`	-

On this page