# Widgets

Unique CoreUI widget components. Check out more examples here!

# Features

  • Unique styles
  • Simple API's

# Widget with progress bar

Widget with progress bar.

# Usage

Examples 
<template>
  <CRow>
    <CCol lg="6">
      <CWidgetProgress
        header="12.124"
        text="Lorem ipsum..."
        footer="Lorem ipsum dolor sit amet enim."
        color="success"
        :value="25"
      />
    </CCol>
    <CCol lg="6">
      <CWidgetProgress
        header="12.124"
        text="Lorem ipsum..."
        footer="Lorem ipsum dolor sit amet enim."
        color="varning"
        :value="25"
      />
    </CCol>
  </CRow>
</template>
12.124
Lorem ipsum...
Lorem ipsum dolor sit amet enim.
12.124
Lorem ipsum...
Lorem ipsum dolor sit amet enim.

# CWidgetProgress API

Name
Default
Type
color undefined String
Background color of the component. By default set style of progress bar, when prop inverse is set to true, then set style of card.
inverse false Boolean
When true, color property set style of card instead of progress bar.
value 25 Number
Determines progress bar width in percent value.
header undefined String
Header of the widget.
text undefined String
Text of the widget.
footer undefined String
Footer of the widget.

# Example of use for default slot

Custom CProgress component 
<template>
  <CWidgetProgress
    header="12.124"
    text="Lorem ipsum..."
    footer="Lorem ipsum dolor sit amet enim."
  >
    <CProgress
      animated
      color="success"
      height="1rem"
      :value="46"
    />
  </CWidgetProgress>
</template>
12.124
Lorem ipsum...
Lorem ipsum dolor sit amet enim.

# Widget Icon

Simple widget with default slot for an icon.

# Usage

Examples 
<template>
  <CRow>
    <CCol col="12" sm="6">
      <CWidgetIcon
        header="$1.999,50"
        text="Income"
        color="primary"
      >
        <CIcon name="cil-settings"/>
      </CWidgetIcon>
    </CCol>
    <CCol col="12" sm="6">
      <CWidgetIcon
        header="$1.999,50"
        text="Income"
        color="info"
      >
        <CIcon name="cil-laptop"/>
      </CWidgetIcon>
    </CCol>
  </CRow>
</template>
$1.999,50
Income
$1.999,50
Income

# CWidgetIcon API

Name
Default
Type
iconPadding true Boolean
Sets widget body padding and change icon wrapper padding class from 'p-3' to 'p-4'.
color undefined String
Background color of icon background.
header undefined String
Header of the widget.
text undefined String
Text of the widget.

# Widget brand

This widget consist of header styled by color property with default slot inside it, and body containing four optional text fields.

# Usage

Examples 
<template>
  <CRow>
    <CCol col="12" sm="6">
      <CWidgetBrand
        color="facebook"
        rightHeader="89k"
        rightFooter="friends"
        leftHeader="459"
        leftFooter="feeds"
        class="w-100"
      >
        <CIcon
          name="cib-facebook"
          height="56"
          class="my-4"
        />
      </CWidgetBrand>
    </CCol>
    <CCol>
      <CWidgetBrand
        color="linkedin"
        right-header="500+"
        right-footer="contracts"
        left-header="292"
        left-footer="feeds"
        class="w-100"
      >
        <CIcon
          name="cib-linkedin"
          height="56"
          class="my-4"
        />
      </CWidgetBrand>
    </CCol>
  </CRow>
</template>
89k
friends
459
feeds
500+
contracts
292
feeds

# CWidgetBrand API

Name
Default
Type
color undefined String
Background color of the component. Brand colors available by default : facebook, twitter, linkedin, flickr, tumblr, xing, github, stack-overflow, youtube, dribbble, instagram, pinterest, vk , yahoo, behance, reddit, vimeo. You can add more colors by using custom version of @coreui/coreui library.
addHeaderClasses undefined String/Array/Object
Additional classes added to slot wrapper.
rightHeader undefined String
Right header text.
leftHeader undefined String
Left header text.
rightFooter undefined String
Right footer text.
leftFooter undefined String
Left footer text.

# Widget with progress bar and icon

# Usage

Examples 
<template>
  <CRow>
    <CCol>
      <CWidgetProgressIcon
        header="87.500"
        text="Visitors"
        color="info"
      >
        <CIcon name="cil-people" height="36"/>
      </CWidgetProgressIcon>
    </CCol>
    <CCol>
      <CWidgetProgressIcon
        header="385"
        text="New Clients"
        color="success"
      >
        <CIcon name="cil-user-follow" height="36"/>
      </CWidgetProgressIcon>
    </CCol>
  </CRow>
</template>
87.500
Visitors
385
New Clients

# CWidgetProgressIcon API

Name
Default
Type
color undefined String
Background color of the component. By default set style of progress bar, when prop inverse is set to true, then set style of card.
inverse false Boolean
When true, color property set style of card instead of progress bar.
value 25 Number
Determines progress bar width in percent value.
header undefined String
Header of the widget.
text undefined String
Text of the widget.

# Example of use for 'progress' slot

Custom CProgress component 
<template>
  <CWidgetProgressIcon
    header="385"
    text="New Clients"
    color="success"
  >
    <CIcon name="cil-basket-loaded" height="36"/>
    <template #progress>
      <CProgress
        animated
        color="warning"
        height="1rem"
        :value="31"
      />
    </template>
  </CWidgetProgressIcon>
</template>
385
New Clients

# Widget dropdown

# Usage

Examples 
<template>
  <CRow>
    <CCol col="12" sm="6">
      <CWidgetDropdown 
        header="9.823" 
        text="Members online"
        color="primary"
      >
        <CDropdown
          class="float-right"
          color="transparent p-0"
          placement="bottom-end"
        >
          <template #toggler-content>
            <CIcon name="cil-settings"/>
          </template>
          <CDropdownItem>Action</CDropdownItem>
          <CDropdownItem>Another action</CDropdownItem>
          <CDropdownItem>Something else here...</CDropdownItem>
          <CDropdownItem disabled>Disabled action</CDropdownItem>
        </CDropdown>
      </CWidgetDropdown>
    </CCol>
    <CCol col="12" sm="6">
      <!-- Raw widget -->
      <CWidgetDropdown 
        header="9.823" 
        text="Members online" 
        color="warning"
      />
    </CCol>
  </CRow>
</template>
9.823
Members online
Action Another action Something else here... Disabled action
9.823
Members online

# CWidgetDropdown API

Name
Default
Type
color undefined String
Background color of the widget.
header undefined String
Header of the widget.
text undefined String
Text of the widget.

# Widget simple

Simple widget with header

# Usage

Examples 
<template>
  <CRow>
    <CCol sm="12" lg="4">
      <CWidgetSimple header="title" text="1,123">
        <CProgress
          animated
          color="danger"
          height="0.8rem"
          :value="34"
        />
      </CWidgetSimple>
    </CCol>
    <CCol sm="12" lg="4">
      <CWidgetSimple header="title" text="1,123">
        <CProgress
          animated
          color="primary"
          height="0.8rem"
          :value="48"
        />
      </CWidgetSimple>
    </CCol>
    <CCol sm="12" lg="4">
      <CWidgetSimple header="title" text="1,123">
        <CProgress
          animated
          color="success"
          height="0.8rem"
          :value="76"
        />
      </CWidgetSimple>
    </CCol>
  </CRow>
</template>
title
1,123
title
1,123
title
1,123

# CWidgetSimple API

Name
Default
Type
header undefined String
Header of the widget.
text undefined String
Text of the widget.
CoreUI © 2025 creativeLabs. core-logo