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#

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'
PropertyDescriptionTypeDefault
actionAction node for your component.ReactNode-
chartChart node for your component.ReactNode-
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsB#

1import { CWidgetCWidgetStatsB } from '@coreui/react'
2// or
3import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
inverseColors have been inverted from their default dark shade.boolean-
progressSets the color context of the progress bar to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
textHelper text for your component.string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsC#

1import { CWidgetStatsCWidgetStatsC } from '@coreui/react'
2// or
3import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
iconIcon node for your component.ReactNode-
inverseColors have been inverted from their default dark shade.boolean-
progressSets the color context of the progress bar to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsD#

1import { CWidgetStatsD } from '@coreui/react'
2// or
3import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
PropertyDescriptionTypeDefault
chartChart node for your component.ReactNode-
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
iconIcon node for your component.ReactNode-
valuesValues and titles for your component.Value[]-

CWidgetStatsE#

1import { CWidgetStatsE } from '@coreui/react'
2// or
3import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
PropertyDescriptionTypeDefault
chartChart node for your component.ReactNode-
classNameA string of all className you want applied to the base component.string-
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-

CWidgetStatsF#

1import { CWidgetStatsF } from '@coreui/react'
2// or
3import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
footerFooter node for your component.ReactNode-
iconIcon node for your component.ReactNode-
paddingSet padding of your component.booleantrue
titleTitle node for your component.ReactNode-
valueValue node for your component.ReactNode-