Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

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

1<CRow>
2  <CCol sm={6}>
3    <CWidgetStatsA
4      className="mb-4"
5      color="primary"
6      value={
7        <>
8          $9.000{' '}
9          <span className="fs-6 fw-normal">
10            (40.9% <CIcon icon={cilArrowTop} />)
11          </span>
12        </>
13      }
14      title="Widget title"
15      action={
16        <CDropdown alignment="end">
17          <CDropdownToggle color="transparent" caret={false} className="p-0">
18            <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
19          </CDropdownToggle>
20          <CDropdownMenu>
21            <CDropdownItem>Action</CDropdownItem>
22            <CDropdownItem>Another action</CDropdownItem>
23            <CDropdownItem>Something else here...</CDropdownItem>
24            <CDropdownItem disabled>Disabled action</CDropdownItem>
25          </CDropdownMenu>
26        </CDropdown>
27      }
28      chart={
29        <CChartLine
30          className="mt-3 mx-3"
31          style={{ height: '70px' }}
32          data={{
33            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
34            datasets: [
35              {
36                label: 'My First dataset',
37                backgroundColor: 'transparent',
38                borderColor: 'rgba(255,255,255,.55)',
39                pointBackgroundColor: '#321fdb',
40                data: [65, 59, 84, 84, 51, 55, 40],
41              },
42            ],
43          }}
44          options={{
45            plugins: {
46              legend: {
47                display: false,
48              },
49            },
50            maintainAspectRatio: false,
51            scales: {
52              x: {
53                grid: {
54                  display: false,
55                  drawBorder: false,
56                },
57                ticks: {
58                  display: false,
59                },
60              },
61              y: {
62                min: 30,
63                max: 89,
64                display: false,
65                grid: {
66                  display: false,
67                },
68                ticks: {
69                  display: false,
70                },
71              },
72            },
73            elements: {
74              line: {
75                borderWidth: 1,
76                tension: 0.4,
77              },
78              point: {
79                radius: 4,
80                hitRadius: 10,
81                hoverRadius: 4,
82              },
83            },
84          }}
85        />
86      }
87    />
88  </CCol>
89  <CCol sm={6}>
90    <CWidgetStatsA
91      className="mb-4"
92      color="info"
93      value={
94        <>
95          $9.000{' '}
96          <span className="fs-6 fw-normal">
97            (40.9% <CIcon icon={cilArrowTop} />)
98          </span>
99        </>
100      }
101      title="Widget title"
102      action={
103        <CDropdown alignment="end">
104          <CDropdownToggle color="transparent" caret={false} className="p-0">
105            <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
106          </CDropdownToggle>
107          <CDropdownMenu>
108            <CDropdownItem>Action</CDropdownItem>
109            <CDropdownItem>Another action</CDropdownItem>
110            <CDropdownItem>Something else here...</CDropdownItem>
111            <CDropdownItem disabled>Disabled action</CDropdownItem>
112          </CDropdownMenu>
113        </CDropdown>
114      }
115      chart={
116        <CChartLine
117          className="mt-3 mx-3"
118          style={{ height: '70px' }}
119          data={{
120            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
121            datasets: [
122              {
123                label: 'My First dataset',
124                backgroundColor: 'transparent',
125                borderColor: 'rgba(255,255,255,.55)',
126                pointBackgroundColor: '#39f',
127                data: [1, 18, 9, 17, 34, 22, 11],
128              },
129            ],
130          }}
131          options={{
132            plugins: {
133              legend: {
134                display: false,
135              },
136            },
137            maintainAspectRatio: false,
138            scales: {
139              x: {
140                grid: {
141                  display: false,
142                  drawBorder: false,
143                },
144                ticks: {
145                  display: false,
146                },
147              },
148              y: {
149                min: -9,
150                max: 39,
151                display: false,
152                grid: {
153                  display: false,
154                },
155                ticks: {
156                  display: false,
157                },
158              },
159            },
160            elements: {
161              line: {
162                borderWidth: 1,
163              },
164              point: {
165                radius: 4,
166                hitRadius: 10,
167                hoverRadius: 4,
168              },
169            },
170          }}
171        />
172      }
173    />
174  </CCol>
175  <CCol sm={6}>
176    <CWidgetStatsA
177      className="mb-4"
178      color="warning"
179      value={
180        <>
181          $9.000{' '}
182          <span className="fs-6 fw-normal">
183            (40.9% <CIcon icon={cilArrowTop} />)
184          </span>
185        </>
186      }
187      title="Widget title"
188      action={
189        <CDropdown alignment="end">
190          <CDropdownToggle color="transparent" caret={false} className="p-0">
191            <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
192          </CDropdownToggle>
193          <CDropdownMenu>
194            <CDropdownItem>Action</CDropdownItem>
195            <CDropdownItem>Another action</CDropdownItem>
196            <CDropdownItem>Something else here...</CDropdownItem>
197            <CDropdownItem disabled>Disabled action</CDropdownItem>
198          </CDropdownMenu>
199        </CDropdown>
200      }
201      chart={
202        <CChartLine
203          className="mt-3"
204          style={{ height: '70px' }}
205          data={{
206            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
207            datasets: [
208              {
209                label: 'My First dataset',
210                backgroundColor: 'rgba(255,255,255,.2)',
211                borderColor: 'rgba(255,255,255,.55)',
212                data: [78, 81, 80, 45, 34, 12, 40],
213                fill: true,
214              },
215            ],
216          }}
217          options={{
218            plugins: {
219              legend: {
220                display: false,
221              },
222            },
223            maintainAspectRatio: false,
224            scales: {
225              x: {
226                display: false,
227              },
228              y: {
229                display: false,
230              },
231            },
232            elements: {
233              line: {
234                borderWidth: 2,
235                tension: 0.4,
236              },
237              point: {
238                radius: 0,
239                hitRadius: 10,
240                hoverRadius: 4,
241              },
242            },
243          }}
244        />
245      }
246    />
247  </CCol>
248  <CCol sm={6}>
249    <CWidgetStatsA
250      className="mb-4"
251      color="danger"
252      value={
253        <>
254          $9.000{' '}
255          <span className="fs-6 fw-normal">
256            (40.9% <CIcon icon={cilArrowTop} />)
257          </span>
258        </>
259      }
260      title="Widget title"
261      action={
262        <CDropdown alignment="end">
263          <CDropdownToggle color="transparent" caret={false} className="p-0">
264            <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
265          </CDropdownToggle>
266          <CDropdownMenu>
267            <CDropdownItem>Action</CDropdownItem>
268            <CDropdownItem>Another action</CDropdownItem>
269            <CDropdownItem>Something else here...</CDropdownItem>
270            <CDropdownItem disabled>Disabled action</CDropdownItem>
271          </CDropdownMenu>
272        </CDropdown>
273      }
274      chart={
275        <CChartBar
276          className="mt-3 mx-3"
277          style={{ height: '70px' }}
278          data={{
279            labels: [
280              'January',
281              'February',
282              'March',
283              'April',
284              'May',
285              'June',
286              'July',
287              'August',
288              'September',
289              'October',
290              'November',
291              'December',
292              'January',
293              'February',
294              'March',
295              'April',
296            ],
297            datasets: [
298              {
299                label: 'My First dataset',
300                backgroundColor: 'rgba(255,255,255,.2)',
301                borderColor: 'rgba(255,255,255,.55)',
302                data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
303                barPercentage: 0.6,
304              },
305            ],
306          }}
307          options={{
308            maintainAspectRatio: false,
309            plugins: {
310              legend: {
311                display: false,
312              },
313            },
314            scales: {
315              x: {
316                grid: {
317                  display: false,
318                  drawTicks: false,
319                },
320                ticks: {
321                  display: false,
322                },
323              },
324              y: {
325                grid: {
326                  display: false,
327                  drawBorder: false,
328                  drawTicks: false,
329                },
330                ticks: {
331                  display: false,
332                },
333              },
334            },
335          }}
336        />
337      }
338    />
339  </CCol>
340</CRow>

CWidgetStatsB#

89.9%

Widget title

Widget helper text

89.9%

Widget title

Widget helper text

1<CRow>
2  <CCol xs={6}>
3    <CWidgetStatsB
4      className="mb-3"
5      progress={{ color: 'success', value: 75 }}
6      text="Widget helper text"
7      title="Widget title"
8      value="89.9%"
9    />
10  </CCol>
11  <CCol xs={6}>
12    <CWidgetStatsB
13      className="mb-3"
14      color="primary"
15      inverse
16      progress={{ value: 75 }}
17      text="Widget helper text"
18      title="Widget title"
19      value="89.9%"
20    />
21  </CCol>
22</CRow>

CWidgetStatsC#

89.9%

Widget title

89.9%

Widget title

1<CRow>
2  <CCol xs={6}>
3    <CWidgetStatsC
4      className="mb-3"
5      icon={<CIcon icon={cilChartPie} height={36} />}
6      progress={{ color: 'success', value: 75 }}
7      text="Widget helper text"
8      title="Widget title"
9      value="89.9%"
10    />
11  </CCol>
12  <CCol xs={6}>
13    <CWidgetStatsC
14      className="mb-3"
15      icon={<CIcon icon={cilChartPie} height={36} />}
16      color="primary"
17      inverse
18      progress={{ value: 75 }}
19      text="Widget helper text"
20      title="Widget title"
21      value="89.9%"
22    />
23  </CCol>
24</CRow>

CWidgetStatsD#

89K

friends

459

feeds

973K

folowers

1.792

tweets

1<CRow>
2  <CCol xs={6}>
3    <CWidgetStatsD
4      className="mb-3"
5      icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
6      chart={
7        <CChartLine
8          className="position-absolute w-100 h-100"
9          data={{
10            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
11            datasets: [
12              {
13                backgroundColor: 'rgba(255,255,255,.1)',
14                borderColor: 'rgba(255,255,255,.55)',
15                pointHoverBackgroundColor: '#fff',
16                borderWidth: 2,
17                data: [65, 59, 84, 84, 51, 55, 40],
18                fill: true,
19              },
20            ],
21          }}
22          options={{
23            elements: {
24              line: {
25                tension: 0.4,
26              },
27              point: {
28                radius: 0,
29                hitRadius: 10,
30                hoverRadius: 4,
31                hoverBorderWidth: 3,
32              },
33            },
34            maintainAspectRatio: false,
35            plugins: {
36              legend: {
37                display: false,
38              },
39            },
40            scales: {
41              x: {
42                display: false,
43              },
44              y: {
45                display: false,
46              },
47            },
48          }}
49        />
50      }
51      style={{ '--cui-card-cap-bg': '#3b5998' }}
52      values={[
53        { title: 'friends', value: '89K' },
54        { title: 'feeds', value: '459' },
55      ]}
56    />
57  </CCol>
58  <CCol xs={6}>
59    <CWidgetStatsD
60      className="mb-3"
61      icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
62      chart={
63        <CChartLine
64          className="position-absolute w-100 h-100"
65          data={{
66            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
67            datasets: [
68              {
69                backgroundColor: 'rgba(255,255,255,.1)',
70                borderColor: 'rgba(255,255,255,.55)',
71                pointHoverBackgroundColor: '#fff',
72                borderWidth: 2,
73                data: [1, 13, 9, 17, 34, 41, 38],
74                fill: true,
75              },
76            ],
77          }}
78          options={{
79            elements: {
80              line: {
81                tension: 0.4,
82              },
83              point: {
84                radius: 0,
85                hitRadius: 10,
86                hoverRadius: 4,
87                hoverBorderWidth: 3,
88              },
89            },
90            maintainAspectRatio: false,
91            plugins: {
92              legend: {
93                display: false,
94              },
95            },
96            scales: {
97              x: {
98                display: false,
99              },
100              y: {
101                display: false,
102              },
103            },
104          }}
105        />
106      }
107      style={{ '--cui-card-cap-bg': '#00aced' }}
108      values={[
109        { title: 'folowers', value: '973K' },
110        { title: 'tweets', value: '1.792' },
111      ]}
112    />
113  </CCol>
114</CRow>

CWidgetStatsE#

Widget title

89.9%

Widget title

89.9%

1<CRow>
2  <CCol xs={6}>
3    <CWidgetStatsE
4      className="mb-3"
5      chart={
6        <CChartBar
7          className="mx-auto"
8          style={{ height: '40px', width: '80px' }}
9          data={{
10            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
11            datasets: [
12              {
13                backgroundColor: '#321fdb',
14                borderColor: 'transparent',
15                borderWidth: 1,
16                data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
17              },
18            ],
19          }}
20          options={{
21            maintainAspectRatio: false,
22            plugins: {
23              legend: {
24                display: false,
25              },
26            },
27            scales: {
28              x: {
29                display: false,
30              },
31              y: {
32                display: false,
33              },
34            },
35          }}
36        />
37      }
38      title="Widget title"
39      value="89.9%"
40    />
41  </CCol>
42  <CCol xs={6}>
43    <CWidgetStatsE
44      className="mb-3"
45      chart={
46        <CChartLine
47          className="mx-auto"
48          style={{ height: '40px', width: '80px' }}
49          data={{
50            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
51            datasets: [
52              {
53                backgroundColor: 'transparent',
54                borderColor: '#321fdb',
55                borderWidth: 2,
56                data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
57              },
58            ],
59          }}
60          options={{
61            maintainAspectRatio: false,
62            elements: {
63              line: {
64                tension: 0.4,
65              },
66              point: {
67                radius: 0,
68              },
69            },
70            plugins: {
71              legend: {
72                display: false,
73              },
74            },
75            scales: {
76              x: {
77                display: false,
78              },
79              y: {
80                display: false,
81              },
82            },
83          }}
84        />
85      }
86      title="Widget title"
87      value="89.9%"
88    />
89  </CCol>
90</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

1<CRow>
2    <CCol xs={6}>
3      <CWidgetStatsF
4        className="mb-3"
5        color="primary"
6        icon={<CIcon icon={cilChartPie} height={24} />}
7        title="Widget title"
8        value="89.9%"/>
9    </CCol>
10    <CCol xs={6}>
11      <CWidgetStatsF
12        className="mb-3"
13        color="warning"
14        icon={<CIcon icon={cilChartPie} height={24} />}
15        title="Widget title"
16        value="89.9%"/>
17    </CCol>
18  </CRow>
19  <CRow>
20    <CCol xs={6}>
21      <CWidgetStatsF
22        className="mb-3"
23        color="primary"
24        icon={<CIcon icon={cilChartPie} height={24} />}
25        padding={false}
26        title="Widget title"
27        value="89.9%"/>
28    </CCol>
29    <CCol xs={6}>
30      <CWidgetStatsF
31        className="mb-3"
32        color="warning"
33        icon={<CIcon icon={cilChartPie} height={24} />}
34        padding={false}
35        title="Widget title"
36        value="89.9%"/>
37    </CCol>
38  </CRow>
39    <CRow>
40    <CCol xs={6}>
41      <CWidgetStatsF
42        className="mb-3"
43        color="primary"
44        footer={
45          <CLink
46            className="font-weight-bold font-xs text-medium-emphasis"
47            href="https://coreui.io/"
48            rel="noopener norefferer"
49            target="_blank"
50          >
51            View more
52            <CIcon icon={cilArrowRight} className="float-end" width={16} />
53          </CLink>
54        }
55        icon={<CIcon icon={cilChartPie} height={24} />}
56        title="Widget title"
57        value="89.9%"/>
58    </CCol>
59    <CCol xs={6}>
60      <CWidgetStatsF
61        className="mb-3"
62        color="warning"
63        footer={
64          <CLink
65            className="font-weight-bold font-xs text-medium-emphasis"
66            href="https://coreui.io/"
67            rel="noopener norefferer"
68            target="_blank"
69          >
70            View more
71            <CIcon icon={cilArrowRight} className="float-end" width={16} />
72          </CLink>
73        }
74        icon={<CIcon icon={cilChartPie} height={24} />}
75        title="Widget title"
76        value="89.9%"/>
77    </CCol>
78  </CRow>

API#

CWidgetStatsA#

1import { CWidgetStatsA } from '@coreui/react'
2// or
3import 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#

1import { CWidgetCWidgetStatsB } from '@coreui/react'
2// or
3import 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#

1import { CWidgetStatsCWidgetStatsC } from '@coreui/react'
2// or
3import 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#

1import { CWidgetStatsD } from '@coreui/react'
2// or
3import 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#

1import { CWidgetStatsE } from '@coreui/react'
2// or
3import 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#

1import { CWidgetStatsF } from '@coreui/react'
2// or
3import 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

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.