refactor: migrate part of components to CoreUI v4

migration.md

@@ -1,3 +1,34 @@
+# Migration from version 3
+
+## Badges
+
+- variant="pill" --> shape="rounded-pill"
+- variant="square" --> shape="rounded-0"
+
+## List Group
+
+- Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`.
+
+## Modal
+
+- Depracated prop `show` Use `visible` instead of.
+
+## Popover
+
+- Depracated prop `header` Use `title` instead of.
+
+## Progress Bar
+
+- Depracated prop `precision`
+- Depracated prop `showLabel`
+- Depracated prop `showPercentage`
+- Depracated prop `showValue`
+
+## Tabs
+
+- Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>`
+
+
 # Migration from version 2
 
 Migration from version 2 must be performed manually because the components library `@coreui/coreui-react` has been completely rewritten.

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -6,10 +6,10 @@ import {
   CCard,
   CCardBody,
   CCardHeader,
-  CLink,
   CCol,
-  CRow
+  CRow,
-} from '@coreui/react'
+  CLink
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 import routes from '../../../routes'
 
@@ -28,31 +28,31 @@ const Breadcrumbs = () => {
             <h6>Manual</h6>
             <CBreadcrumb>
               <CBreadcrumbItem>
-                <CLink>Home</CLink>
+                <CLink href="#">Home</CLink>
               </CBreadcrumbItem>
               <CBreadcrumbItem active>Library</CBreadcrumbItem>
             </CBreadcrumb>
             <CBreadcrumb>
               <CBreadcrumbItem>
-                <CLink>Home</CLink>
+                <CLink href="#">Home</CLink>
               </CBreadcrumbItem>
               <CBreadcrumbItem>
-                <CLink>Library</CLink>
+                <CLink href="#">Library</CLink>
               </CBreadcrumbItem>
               <CBreadcrumbItem active>Data</CBreadcrumbItem>
             </CBreadcrumb>
             <CBreadcrumb>
               <CBreadcrumbItem>
-                <CLink>Home</CLink>
+                <CLink href="#">Home</CLink>
               </CBreadcrumbItem>
               <CBreadcrumbItem>
-                <CLink>Library</CLink>
+                <CLink href="#">Library</CLink>
               </CBreadcrumbItem>
               <CBreadcrumbItem>
-                <CLink>Data</CLink>
+                <CLink href="#">Data</CLink>
               </CBreadcrumbItem>
               <CBreadcrumbItem active>
-                <span>Bootstrap</span>
+                Bootstrap
               </CBreadcrumbItem>
             </CBreadcrumb>
           </CCardBody>

src/views/base/cards/Cards.js

@@ -8,10 +8,9 @@ import {
   CCol,
   CRow,
   CCollapse,
-  CFade,
-  CSwitch,
   CLink
-} from  '@coreui/react'
+} from  '@coreui/react-ts'
+import { CFade, CSwitch } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { DocsLink } from 'src/reusable'
 

src/views/base/collapses/Collapses.js

@@ -8,7 +8,7 @@ import {
   CCol,
   CCollapse,
   CFade,
-  CRow 
+  CRow
 } from '@coreui/react';
 import { DocsLink } from 'src/reusable'
 
@@ -99,7 +99,7 @@ const Collapses = () => {
                   Both</CButton>{' '}
               </p>
               <CRow>
-                <CCol>
+                <CCol xs>
                   <CCollapse show={collapseMulti[0]}>
                     <CCard>
                       <CCardBody>
@@ -148,10 +148,10 @@ const Collapses = () => {
             <div id="accordion">
               <CCard className="mb-0">
                 <CCardHeader id="headingOne">
-                  <CButton 
+                  <CButton
-                    block 
+                    block
-                    color="link" 
+                    color="link"
-                    className="text-left m-0 p-0" 
+                    className="text-left m-0 p-0"
                     onClick={() => setAccordion(accordion === 0 ? null : 0)}
                   >
                     <h5 className="m-0 p-0">Collapsible Group Item #1</h5>
@@ -169,10 +169,10 @@ const Collapses = () => {
               </CCard>
               <CCard className="mb-0">
                 <CCardHeader id="headingTwo">
-                  <CButton 
+                  <CButton
-                    block 
+                    block
-                    color="link" 
+                    color="link"
-                    className="text-left m-0 p-0" 
+                    className="text-left m-0 p-0"
                     onClick={() => setAccordion(accordion === 1 ? null : 1)}
                   >
                     <h5 className="m-0 p-0">Collapsible Group Item #2</h5>
@@ -190,10 +190,10 @@ const Collapses = () => {
               </CCard>
               <CCard className="mb-0">
                 <CCardHeader id="headingThree">
-                  <CButton 
+                  <CButton
-                    block 
+                    block
-                    color="link" 
+                    color="link"
-                    className="text-left m-0 p-0" 
+                    className="text-left m-0 p-0"
                     onClick={() => setAccordion(accordion === 2 ? null : 2)}
                   >
                     <h5 className="m-0 p-0">Collapsible Group Item #3</h5>

src/views/base/jumbotrons/Jumbotrons.js

@@ -18,7 +18,7 @@ const Jumbotrons = () => {
   return (
     <>
       <CRow>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               Jumbotron
@@ -38,7 +38,7 @@ const Jumbotrons = () => {
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               Jumbotron
@@ -56,7 +56,7 @@ const Jumbotrons = () => {
         </CCol>
       </CRow>
       <CRow>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               Embed

src/views/base/list-groups/ListGroups.js

@@ -10,7 +10,7 @@ import {
   CRow,
   CTabContent,
   CTabPane
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 
@@ -91,15 +91,15 @@ const ListGroups = () => {
             </CCardHeader>
             <CCardBody>
               <CListGroup>
-                <CListGroupItem action>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem action color="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem component="button" color="primary">This is a primary list group item</CListGroupItem>
-                <CListGroupItem action color="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem component="button" color="secondary">This is a secondary list group item</CListGroupItem>
-                <CListGroupItem action color="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem component="button" color="success">This is a success list group item</CListGroupItem>
-                <CListGroupItem action color="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem component="button" color="danger">This is a danger list group item</CListGroupItem>
-                <CListGroupItem action color="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem component="button" color="warning">This is a warning list group item</CListGroupItem>
-                <CListGroupItem action color="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem component="button" color="info">This is a info list group item</CListGroupItem>
-                <CListGroupItem action color="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem component="button" color="light">This is a light list group item</CListGroupItem>
-                <CListGroupItem action color="dark">This is a dark list group item</CListGroupItem>
+                <CListGroupItem component="button" color="dark">This is a dark list group item</CListGroupItem>
               </CListGroup>
             </CCardBody>
           </CCard>
@@ -184,7 +184,7 @@ const ListGroups = () => {
             <CCardBody>
 
               <CListGroup>
-                <CListGroupItem action active>
+                <CListGroupItem component="a" active>
                   <h5 className="d-flex w-100 justify-content-between">
                     List group item heading
                     <small>3 days ago</small>
@@ -194,14 +194,14 @@ const ListGroups = () => {
                     <small>Donec id elit non mi porta.</small>
                   </div>
                 </CListGroupItem>
-                <CListGroupItem action>
+                <CListGroupItem component="a">
                   <h5>List group item heading</h5>
                   <div>
                     Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                   </div>
                   <small>Small.</small>
                 </CListGroupItem>
-                <CListGroupItem action>
+                <CListGroupItem component="a">
                   <h5>List group item heading</h5>
                   <div>
                     Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
@@ -215,7 +215,7 @@ const ListGroups = () => {
         </CCol>
       </CRow>
       <CRow>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               List group
@@ -225,34 +225,34 @@ const ListGroups = () => {
               <CRow>
                 <CCol xs="4">
                   <CListGroup id="list-tab" role="tablist">
-                    <CListGroupItem onClick={() => setActiveTab(0)} action active={activeTab === 0} >Home</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(0)} component="button" active={activeTab === 0} >Home</CListGroupItem>
-                    <CListGroupItem onClick={() => setActiveTab(1)} action active={activeTab === 1} >Profile</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(1)} component="button" active={activeTab === 1} >Profile</CListGroupItem>
-                    <CListGroupItem onClick={() => setActiveTab(2)} action active={activeTab === 2} >Messages</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(2)} component="button" active={activeTab === 2} >Messages</CListGroupItem>
-                    <CListGroupItem onClick={() => setActiveTab(3)} action active={activeTab === 3} >Settings</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(3)} component="button" active={activeTab === 3} >Settings</CListGroupItem>
                   </CListGroup>
                 </CCol>
                 <CCol xs="8">
                   <CTabContent>
-                    <CTabPane active={activeTab === 0} >
+                    <CTabPane visible={activeTab === 0} >
                       <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
                         nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
                         tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
                         eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
                     </CTabPane>
-                    <CTabPane active={activeTab === 1}>
+                    <CTabPane visible={activeTab === 1}>
                       <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
                         dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
                         anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
                         reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
                     </CTabPane>
-                    <CTabPane active={activeTab === 2}>
+                    <CTabPane visible={activeTab === 2}>
                       <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
                         nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
                         est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
                         deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
                         laborum elit adipisicing pariatur cillum.</p>
                     </CTabPane>
-                    <CTabPane active={activeTab === 3}>
+                    <CTabPane visible={activeTab === 3}>
                       <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
                         sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
                         aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco

src/views/base/navs/Navs.js

@@ -12,7 +12,7 @@ import {
   CNav,
   CNavItem,
   CNavLink
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Navs = () => {
@@ -244,8 +244,8 @@ const Navs = () => {
                 <CNavItem>
                   <CNavLink active>Link</CNavLink>
                 </CNavItem>
-                <CDropdown inNav>
+                <CDropdown variant="nav-item">
-                  <CDropdownToggle caret>
+                  <CDropdownToggle>
                     Dropdown
                   </CDropdownToggle>
                   <CDropdownMenu>
@@ -278,8 +278,8 @@ const Navs = () => {
                 <CNavItem>
                   <CNavLink active>Link</CNavLink>
                 </CNavItem>
-                <CDropdown inNav>
+                <CDropdown variant="nav-item">
-                  <CDropdownToggle caret>
+                  <CDropdownToggle>
                     Dropdown
                   </CDropdownToggle>
                   <CDropdownMenu>

src/views/base/popovers/Popovers.js

@@ -7,8 +7,8 @@ import {
   CPopover,
   CRow,
   CCol,
-  CLink
+} from '@coreui/react-ts'
-} from '@coreui/react'
+import { CLink } from '@coreui/react'
 import { DocsLink } from 'src/reusable'
 
 const Popovers = () => {
@@ -35,25 +35,25 @@ const Popovers = () => {
 
           <p className="muted">
             Tight pants next level keffiyeh
-            <CPopover header="Popover header" content="Popover text">
+            <CPopover title="Popover header" content="Popover text">
               <CLink> you probably </CLink>
             </CPopover>
               haven't heard of them.
             Photo booth beard raw denim letterpress vegan messenger
             bag stumptown. Farm-to-table seitan, mcsweeney's fixie
             sustainable quinoa 8-bit american apparel
-            <CPopover header="Popover header" content="Popover text">
+            <CPopover title="Popover header" content="Popover text">
               <CLink> have a </CLink>
             </CPopover>
             terry richardson vinyl chambray. Beard stumptown,
             cardigans banh mi lomo thundercats. Tofu biodiesel
             williamsburg marfa, four loko mcsweeney''s cleanse
             vegan chambray. A really ironic artisan
-            <CPopover header="Popover header" content="Popover text">
+            <CPopover title="Popover header" content="Popover text">
               <CLink> whatever keytar </CLink>
             </CPopover>
             scenester farm-to-table banksy Austin
-            <CPopover header="Popover header" content="Popover text">
+            <CPopover title="Popover header" content="Popover text">
               <CLink> twitter handle </CLink>
             </CPopover>
 
@@ -78,10 +78,9 @@ const Popovers = () => {
                   className="py-4 text-center"
                   key={placement}
                 >
-                  <CPopover header="Popover header"
+                  <CPopover title="Popover header"
                     content={`Popover with placement: ${placement}`}
                     placement={placement}
-                    interactive={true}
                     trigger="click"
                   >
                     <CButton color="primary">

src/views/base/progress-bar/ProgressBar.js

@@ -5,7 +5,7 @@ import {
   CCardHeader,
   CProgress,
   CProgressBar
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const ProgressBar = () => {
@@ -30,9 +30,9 @@ const ProgressBar = () => {
           <small> labels</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress value={25.3746472} showPercentage precision={2} className="mb-3"/>
+          <CProgress value={25.3746472} className="mb-3"/>
-          <CProgress value={50.45} showValue className="mb-3"/>
+          <CProgress value={50.45} className="mb-3"/>
-          <CProgress value={15} max={20} showPercentage className="mb-3"/>
+          <CProgress value={15} max={20} className="mb-3"/>
         </CCardBody>
       </CCard>
       <CCard>
@@ -41,8 +41,8 @@ const ProgressBar = () => {
           <small> heights</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress value={25} className="mb-3" style={{height: "3px"}}/>
+          <CProgress value={25} className="mb-3" height="3"/>
-          <CProgress value={25} className="mb-3" style={{height: "30px"}}/>
+          <CProgress value={25} className="mb-3" height="30"/>
         </CCardBody>
       </CCard>
       <CCard>

src/views/base/tables/Tables.js

@@ -145,7 +145,7 @@ const Tables = () => {
       </CRow>
 
       <CRow>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               Combined All Table
@@ -176,7 +176,7 @@ const Tables = () => {
         </CCol>
       </CRow>
         <CRow>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               Combined All dark Table

src/views/base/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 import {
   CCol,
   CNav,
@@ -9,15 +9,16 @@ import {
   CTabPane,
   CCard,
   CCardBody,
-  CTabs,
+  CCardHeader,
-  CCardHeader
+} from "@coreui/react-ts";
-} from '@coreui/react'
+import CIcon from "@coreui/icons-react";
-import CIcon from '@coreui/icons-react'
+import { DocsLink } from "src/reusable";
-import { DocsLink } from 'src/reusable'
 
 const Tabs = () => {
-  const [active, setActive] = useState(1)
+  const [activeKey, setActiveKey] = useState(1)
-  const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
+  const [active, setActive] = useState(1);
+  const lorem =
+    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.";
 
   return (
     <CRow>
@@ -25,76 +26,48 @@ const Tabs = () => {
         <CCard>
           <CCardHeader>
             Index indentifiers
-            <DocsLink name="CTabs"/>
+            <DocsLink name="CTabs" />
           </CCardHeader>
           <CCardBody>
-            <CTabs>
+            <CNav variant="tabs">
-              <CNav variant="tabs">
+              <CNavItem>
-                <CNavItem>
+                <CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>Home</CNavLink>
-                  <CNavLink>
+              </CNavItem>
-                    Home
+              <CNavItem>
-                  </CNavLink>
+                <CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>Profile</CNavLink>
-                </CNavItem>
+              </CNavItem>
-                <CNavItem>
+              <CNavItem>
-                  <CNavLink>
+                <CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>Messages</CNavLink>
-                    Profile
+              </CNavItem>
-                  </CNavLink>
+            </CNav>
-                </CNavItem>
+            <CTabContent>
-                <CNavItem>
+              <CTabPane visible={activeKey === 1}>{`1. ${lorem}`}</CTabPane>
-                  <CNavLink>
+              <CTabPane visible={activeKey === 2}>{`2. ${lorem}`}</CTabPane>
-                    Messages
+              <CTabPane visible={activeKey === 3}>{`3. ${lorem}`}</CTabPane>
-                  </CNavLink>
+            </CTabContent>
-                </CNavItem>
-              </CNav>
-              <CTabContent>
-                <CTabPane>
-                  {`1. ${lorem}`}
-                </CTabPane>
-                <CTabPane>
-                  {`2. ${lorem}`}
-                </CTabPane>
-                <CTabPane>
-                  {`3. ${lorem}`}
-                </CTabPane>
-              </CTabContent>
-            </CTabs>
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12" md="6" className="mb-4">
+      {/* <CCol xs="12" md="6" className="mb-4">
         <CCard>
-          <CCardHeader>
+          <CCardHeader>Id indentifiers</CCardHeader>
-            Id indentifiers
-          </CCardHeader>
           <CCardBody>
             <CTabs activeTab="home">
               <CNav variant="tabs">
                 <CNavItem>
-                  <CNavLink data-tab="home">
+                  <CNavLink data-tab="home">Home</CNavLink>
-                    Home
-                  </CNavLink>
                 </CNavItem>
                 <CNavItem>
-                  <CNavLink data-tab="profile">
+                  <CNavLink data-tab="profile">Profile</CNavLink>
-                    Profile
-                  </CNavLink>
                 </CNavItem>
                 <CNavItem>
-                  <CNavLink data-tab="messages">
+                  <CNavLink data-tab="messages">Messages</CNavLink>
-                    Messages
-                  </CNavLink>
                 </CNavItem>
               </CNav>
               <CTabContent>
-                <CTabPane data-tab="home">
+                <CTabPane data-tab="home">{`1. ${lorem}`}</CTabPane>
-                  {`1. ${lorem}`}
+                <CTabPane data-tab="profile">{`2. ${lorem}`}</CTabPane>
-                </CTabPane>
+                <CTabPane data-tab="messages">{`3. ${lorem}`}</CTabPane>
-                <CTabPane data-tab="profile">
-                  {`2. ${lorem}`}
-                </CTabPane>
-                <CTabPane data-tab="messages">
-                  {`3. ${lorem}`}
-                </CTabPane>
               </CTabContent>
             </CTabs>
           </CCardBody>
@@ -103,9 +76,7 @@ const Tabs = () => {
 
       <CCol xs="12" md="6" className="mb-4">
         <CCard>
-          <CCardHeader>
+          <CCardHeader>No fade animation tabs</CCardHeader>
-            No fade animation tabs
-          </CCardHeader>
           <CCardBody>
             <CTabs>
               <CNav variant="tabs">
@@ -121,20 +92,14 @@ const Tabs = () => {
                 </CNavItem>
                 <CNavItem>
                   <CNavLink>
-                    <CIcon name="cil-chart-pie"/>
+                    <CIcon name="cil-chart-pie" />
                   </CNavLink>
                 </CNavItem>
               </CNav>
               <CTabContent fade={false}>
-                <CTabPane>
+                <CTabPane>{`1. ${lorem}`}</CTabPane>
-                  {`1. ${lorem}`}
+                <CTabPane>{`2. ${lorem}`}</CTabPane>
-                </CTabPane>
+                <CTabPane>{`3. ${lorem}`}</CTabPane>
-                <CTabPane>
-                  {`2. ${lorem}`}
-                </CTabPane>
-                <CTabPane>
-                  {`3. ${lorem}`}
-                </CTabPane>
               </CTabContent>
             </CTabs>
           </CCardBody>
@@ -143,48 +108,43 @@ const Tabs = () => {
 
       <CCol xs="12" md="6" className="mb-4">
         <CCard>
-          <CCardHeader>
+          <CCardHeader>Controlled tabs</CCardHeader>
-            Controlled tabs
-          </CCardHeader>
           <CCardBody>
-            <CTabs activeTab={active} onActiveTabChange={idx => setActive(idx)}>
+            <CTabs
+              activeTab={active}
+              onActiveTabChange={(idx) => setActive(idx)}
+            >
               <CNav variant="tabs">
                 <CNavItem>
                   <CNavLink>
                     <CIcon name="cil-calculator" />
-                    { active === 0 && ' Home'}
+                    {active === 0 && " Home"}
                   </CNavLink>
                 </CNavItem>
                 <CNavItem>
                   <CNavLink>
                     <CIcon name="cil-basket" />
-                    { active === 1 && ' Profile'}
+                    {active === 1 && " Profile"}
                   </CNavLink>
                 </CNavItem>
                 <CNavItem>
                   <CNavLink>
-                    <CIcon name="cil-chart-pie"/>
+                    <CIcon name="cil-chart-pie" />
-                    { active === 2 && ' Messages'}
+                    {active === 2 && " Messages"}
                   </CNavLink>
                 </CNavItem>
               </CNav>
               <CTabContent>
-                <CTabPane>
+                <CTabPane>{`1. ${lorem}`}</CTabPane>
-                  {`1. ${lorem}`}
+                <CTabPane>{`2. ${lorem}`}</CTabPane>
-                </CTabPane>
+                <CTabPane>{`3. ${lorem}`}</CTabPane>
-                <CTabPane>
-                  {`2. ${lorem}`}
-                </CTabPane>
-                <CTabPane>
-                  {`3. ${lorem}`}
-                </CTabPane>
               </CTabContent>
             </CTabs>
           </CCardBody>
         </CCard>
-      </CCol>
+      </CCol> */}
     </CRow>
-  )
+  );
-}
+};
 
-export default Tabs
+export default Tabs;

src/views/base/tooltips/Tooltips.js

@@ -7,6 +7,8 @@ import {
   CTooltip,
   CRow,
   CCol,
+} from '@coreui/react-ts'
+import {
   CLink
 } from '@coreui/react'
 import { DocsLink } from 'src/reusable'

src/views/buttons/button-groups/ButtonGroups.js

@@ -3,7 +3,6 @@ import {
   CButton,
   CDropdown,
   CButtonGroup,
-  CButtonToolbar,
   CCard,
   CCardBody,
   CCardHeader,
@@ -11,11 +10,14 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
+  CRow,
+} from '@coreui/react-ts'
+import {
+  CButtonToolbar,
   CInput,
   CInputGroup,
   CInputGroupPrepend,
   CInputGroupText,
-  CRow,
   CCallout
 } from '@coreui/react'
 import { DocsLink } from 'src/reusable'

src/views/buttons/buttons/Buttons.js

@@ -6,7 +6,7 @@ import {
   CCardHeader,
   CCol,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 import { DocsLink } from 'src/reusable'
 
@@ -24,31 +24,31 @@ const Buttons = () => {
               Normal
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="primary">Primary</CButton>
+              <CButton href="#" color="primary">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="secondary">Secondary</CButton>
+              <CButton color="secondary">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="success">Success</CButton>
+              <CButton color="success">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="warning">Warning</CButton>
+              <CButton color="warning">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="danger">Danger</CButton>
+              <CButton color="danger">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="info">Info</CButton>
+              <CButton color="info">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="light">Light</CButton>
+              <CButton color="light">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="dark">Dark</CButton>
+              <CButton color="dark">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="link">Link</CButton>
+              <CButton color="link">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -56,31 +56,31 @@ const Buttons = () => {
               Active State
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="primary" aria-pressed="true">Primary</CButton>
+              <CButton active color="primary" aria-pressed="true">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="secondary" aria-pressed="true">Secondary</CButton>
+              <CButton active color="secondary" aria-pressed="true">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="success" aria-pressed="true">Success</CButton>
+              <CButton active color="success" aria-pressed="true">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="warning" aria-pressed="true">Warning</CButton>
+              <CButton active color="warning" aria-pressed="true">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="danger" aria-pressed="true">Danger</CButton>
+              <CButton active color="danger" aria-pressed="true">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="info" aria-pressed="true">Info</CButton>
+              <CButton active color="info" aria-pressed="true">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="light" aria-pressed="true">Light</CButton>
+              <CButton active color="light" aria-pressed="true">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="dark" aria-pressed="true">Dark</CButton>
+              <CButton active color="dark" aria-pressed="true">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block color="link" aria-pressed="true">Link</CButton>
+              <CButton active color="link" aria-pressed="true">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -88,38 +88,38 @@ const Buttons = () => {
               Disabled
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="primary" disabled>Primary</CButton>
+              <CButton color="primary" disabled>Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="secondary" disabled>Secondary</CButton>
+              <CButton color="secondary" disabled>Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="success" disabled>Success</CButton>
+              <CButton color="success" disabled>Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="warning" disabled>Warning</CButton>
+              <CButton color="warning" disabled>Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="danger" disabled>Danger</CButton>
+              <CButton color="danger" disabled>Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="info" disabled>Info</CButton>
+              <CButton color="info" disabled>Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="light" disabled>Light</CButton>
+              <CButton color="light" disabled>Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="dark" disabled>Dark</CButton>
+              <CButton color="dark" disabled>Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block color="link" disabled>Link</CButton>
+              <CButton color="link" disabled>Link</CButton>
             </CCol>
           </CRow>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          variant="outline" Buttons
+          layout="outline" Buttons
         </CCardHeader>
         <CCardBody>
           <p>
@@ -130,28 +130,28 @@ const Buttons = () => {
               Normal
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="primary">Primary</CButton>
+              <CButton layout="outline" color="primary">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="secondary">Secondary</CButton>
+              <CButton layout="outline" color="secondary">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="success">Success</CButton>
+              <CButton layout="outline" color="success">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="warning">Warning</CButton>
+              <CButton layout="outline" color="warning">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="danger">Danger</CButton>
+              <CButton layout="outline" color="danger">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="info">Info</CButton>
+              <CButton layout="outline" color="info">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="light">Light</CButton>
+              <CButton layout="outline" color="light">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="dark">Dark</CButton>
+              <CButton layout="outline" color="dark">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
           </CRow>
@@ -160,28 +160,28 @@ const Buttons = () => {
               Active State
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="primary" aria-pressed="true">Primary</CButton>
+              <CButton layout="outline" active color="primary" aria-pressed="true">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="secondary" aria-pressed="true">Secondary</CButton>
+              <CButton layout="outline" active color="secondary" aria-pressed="true">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="success" aria-pressed="true">Success</CButton>
+              <CButton layout="outline" active color="success" aria-pressed="true">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="warning" aria-pressed="true">Warning</CButton>
+              <CButton layout="outline" active color="warning" aria-pressed="true">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="danger" aria-pressed="true">Danger</CButton>
+              <CButton layout="outline" active color="danger" aria-pressed="true">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="info" aria-pressed="true">Info</CButton>
+              <CButton layout="outline" active color="info" aria-pressed="true">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="light" aria-pressed="true">Light</CButton>
+              <CButton layout="outline" active color="light" aria-pressed="true">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" active color="dark" aria-pressed="true">Dark</CButton>
+              <CButton layout="outline" active color="dark" aria-pressed="true">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
           </CRow>
@@ -190,28 +190,28 @@ const Buttons = () => {
               Disabled
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="primary" disabled>Primary</CButton>
+              <CButton layout="outline" color="primary" disabled>Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
+              <CButton layout="outline" color="secondary" disabled>Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="success" disabled>Success</CButton>
+              <CButton layout="outline" color="success" disabled>Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="warning" disabled>Warning</CButton>
+              <CButton layout="outline" color="warning" disabled>Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="danger" disabled>Danger</CButton>
+              <CButton layout="outline" color="danger" disabled>Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="info" disabled>Info</CButton>
+              <CButton layout="outline" color="info" disabled>Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="light" disabled>Light</CButton>
+              <CButton layout="outline" color="light" disabled>Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="outline" color="dark" disabled>Dark</CButton>
+              <CButton layout="outline" color="dark" disabled>Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
           </CRow>
@@ -219,39 +219,39 @@ const Buttons = () => {
       </CCard>
       <CCard>
         <CCardHeader>
-          variant="ghost" Buttons
+          layout="ghost" Buttons
         </CCardHeader>
         <CCardBody>
           <p>
-            Use <code>.btn-ghost-*</code> class for variant="ghost" buttons.
+            Use <code>.btn-ghost-*</code> class for layout="ghost" buttons.
           </p>
           <CRow className="align-items-center">
             <CCol col="12" xl className="mb-3 mb-xl-0">
               Normal
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="primary">Primary</CButton>
+              <CButton layout="ghost" color="primary">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="secondary">Secondary</CButton>
+              <CButton layout="ghost" color="secondary">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="success">Success</CButton>
+              <CButton layout="ghost" color="success">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="warning">Warning</CButton>
+              <CButton layout="ghost" color="warning">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="danger">Danger</CButton>
+              <CButton layout="ghost" color="danger">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="info">Info</CButton>
+              <CButton layout="ghost" color="info">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="light">Light</CButton>
+              <CButton layout="ghost" color="light">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="dark">Dark</CButton>
+              <CButton layout="ghost" color="dark">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
           </CRow>
@@ -260,28 +260,28 @@ const Buttons = () => {
               Active State
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
+              <CButton active layout="ghost" color="primary" aria-pressed="true">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
+              <CButton active layout="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="success" aria-pressed="true">Success</CButton>
+              <CButton active layout="ghost" color="success" aria-pressed="true">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
+              <CButton active layout="ghost" color="warning" aria-pressed="true">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
+              <CButton active layout="ghost" color="danger" aria-pressed="true">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="info" aria-pressed="true">Info</CButton>
+              <CButton active layout="ghost" color="info" aria-pressed="true">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="light" aria-pressed="true">Light</CButton>
+              <CButton active layout="ghost" color="light" aria-pressed="true">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block active variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
+              <CButton active layout="ghost" color="dark" aria-pressed="true">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
           </CRow>
@@ -290,28 +290,28 @@ const Buttons = () => {
               Disabled
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
+              <CButton layout="ghost" color="primary" disabled>Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
+              <CButton layout="ghost" color="secondary" disabled>Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="success" disabled>Success</CButton>
+              <CButton layout="ghost" color="success" disabled>Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
+              <CButton layout="ghost" color="warning" disabled>Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
+              <CButton layout="ghost" color="danger" disabled>Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="info" disabled>Info</CButton>
+              <CButton layout="ghost" color="info" disabled>Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="light" disabled>Light</CButton>
+              <CButton layout="ghost" color="light" disabled>Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
+              <CButton layout="ghost" color="dark" disabled>Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
           </CRow>
@@ -330,31 +330,31 @@ const Buttons = () => {
               Normal
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="primary">Primary</CButton>
+              <CButton shape="square" color="primary">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="secondary">Secondary</CButton>
+              <CButton shape="square" color="secondary">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="success">Success</CButton>
+              <CButton shape="square" color="success">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="warning">Warning</CButton>
+              <CButton shape="square" color="warning">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="danger">Danger</CButton>
+              <CButton shape="square" color="danger">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="info">Info</CButton>
+              <CButton shape="square" color="info">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="light">Light</CButton>
+              <CButton shape="square" color="light">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="dark">Dark</CButton>
+              <CButton shape="square" color="dark">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="link">Link</CButton>
+              <CButton shape="square" color="link">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -362,31 +362,31 @@ const Buttons = () => {
               Active State
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="primary" aria-pressed="true">Primary</CButton>
+              <CButton active shape="square" color="primary" aria-pressed="true">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="secondary" aria-pressed="true">Secondary</CButton>
+              <CButton active shape="square" color="secondary" aria-pressed="true">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="success" aria-pressed="true">Success</CButton>
+              <CButton active shape="square" color="success" aria-pressed="true">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="warning" aria-pressed="true">Warning</CButton>
+              <CButton active shape="square" color="warning" aria-pressed="true">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="danger" aria-pressed="true">Danger</CButton>
+              <CButton active shape="square" color="danger" aria-pressed="true">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="info" aria-pressed="true">Info</CButton>
+              <CButton active shape="square" color="info" aria-pressed="true">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="light" aria-pressed="true">Light</CButton>
+              <CButton active shape="square" color="light" aria-pressed="true">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="dark" aria-pressed="true">Dark</CButton>
+              <CButton active shape="square" color="dark" aria-pressed="true">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="square" color="link" aria-pressed="true">Link</CButton>
+              <CButton active shape="square" color="link" aria-pressed="true">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -394,31 +394,31 @@ const Buttons = () => {
               Disabled
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="primary" disabled>Primary</CButton>
+              <CButton shape="square" color="primary" disabled>Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="secondary" disabled>Secondary</CButton>
+              <CButton shape="square" color="secondary" disabled>Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="success" disabled>Success</CButton>
+              <CButton shape="square" color="success" disabled>Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="warning" disabled>Warning</CButton>
+              <CButton shape="square" color="warning" disabled>Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="danger" disabled>Danger</CButton>
+              <CButton shape="square" color="danger" disabled>Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="info" disabled>Info</CButton>
+              <CButton shape="square" color="info" disabled>Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="light" disabled>Light</CButton>
+              <CButton shape="square" color="light" disabled>Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="dark" disabled>Dark</CButton>
+              <CButton shape="square" color="dark" disabled>Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="square" color="link" disabled>Link</CButton>
+              <CButton shape="square" color="link" disabled>Link</CButton>
             </CCol>
           </CRow>
         </CCardBody>
@@ -436,31 +436,31 @@ const Buttons = () => {
               Normal
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="primary" className="">Primary</CButton>
+              <CButton shape="pill" color="primary">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="secondary">Secondary</CButton>
+              <CButton shape="pill" color="secondary">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="success">Success</CButton>
+              <CButton shape="pill" color="success">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="warning">Warning</CButton>
+              <CButton shape="pill" color="warning">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="danger">Danger</CButton>
+              <CButton shape="pill" color="danger">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="info">Info</CButton>
+              <CButton shape="pill" color="info">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="light">Light</CButton>
+              <CButton shape="pill" color="light">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="dark">Dark</CButton>
+              <CButton shape="pill" color="dark">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="link">Link</CButton>
+              <CButton shape="pill" color="link">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -468,31 +468,31 @@ const Buttons = () => {
               Active State
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="primary" aria-pressed="true">Primary</CButton>
+              <CButton active shape="pill" color="primary" aria-pressed="true">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
+              <CButton active shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="success" aria-pressed="true">Success</CButton>
+              <CButton active shape="pill" color="success" aria-pressed="true">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="warning" aria-pressed="true">Warning</CButton>
+              <CButton active shape="pill" color="warning" aria-pressed="true">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="danger" aria-pressed="true">Danger</CButton>
+              <CButton active shape="pill" color="danger" aria-pressed="true">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="info" aria-pressed="true">Info</CButton>
+              <CButton active shape="pill" color="info" aria-pressed="true">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="light" aria-pressed="true">Light</CButton>
+              <CButton active shape="pill" color="light" aria-pressed="true">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="dark" aria-pressed="true">Dark</CButton>
+              <CButton active shape="pill" color="dark" aria-pressed="true">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active block shape="pill" color="link" aria-pressed="true">Link</CButton>
+              <CButton active shape="pill" color="link" aria-pressed="true">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -500,31 +500,31 @@ const Buttons = () => {
               Disabled
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="primary" disabled>Primary</CButton>
+              <CButton shape="pill" color="primary" disabled>Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="secondary" disabled>Secondary</CButton>
+              <CButton shape="pill" color="secondary" disabled>Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="success" disabled>Success</CButton>
+              <CButton shape="pill" color="success" disabled>Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="warning" disabled>Warning</CButton>
+              <CButton shape="pill" color="warning" disabled>Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="danger" disabled>Danger</CButton>
+              <CButton shape="pill" color="danger" disabled>Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="info" disabled>Info</CButton>
+              <CButton shape="pill" color="info" disabled>Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="light" disabled>Light</CButton>
+              <CButton shape="pill" color="light" disabled>Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="dark" disabled>Dark</CButton>
+              <CButton shape="pill" color="dark" disabled>Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton block shape="pill" color="link" disabled>Link</CButton>
+              <CButton shape="pill" color="link" disabled>Link</CButton>
             </CCol>
           </CRow>
         </CCardBody>
@@ -544,10 +544,10 @@ const Buttons = () => {
               <CButton color="primary" size="sm">Standard Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton color="secondary" variant="outline" size="sm">Outline Button</CButton>
+              <CButton color="secondary" layout="outline" size="sm">Outline Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton size="sm" variant="ghost" color="ghost">Ghost Button</CButton>
+              <CButton size="sm" layout="ghost" color="ghost">Ghost Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
               <CButton shape="square" color="warning" size="sm">Square Button</CButton>
@@ -564,10 +564,10 @@ const Buttons = () => {
               <CButton color="primary">Standard Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton variant="outline" color="secondary" >Outline Button</CButton>
+              <CButton layout="outline" color="secondary" >Outline Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton variant="ghost" color="success">Ghost Button</CButton>
+              <CButton layout="ghost" color="success">Ghost Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
               <CButton shape="square" color="warning">Square Button</CButton>
@@ -584,10 +584,10 @@ const Buttons = () => {
               <CButton color="primary" size="lg">Standard Button</CButton>
             </CCol>
             <CCol col="2"className="mb-3 mb-xl-0 text-center">
-              <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
+              <CButton layout="outline" color="secondary" size="lg">Outline Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
+              <CButton layout="ghost" color="success" size="lg">Ghost Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
               <CButton shape="square" color="warning" size="lg">Square Button</CButton>
@@ -611,12 +611,12 @@ const Buttons = () => {
               </CButton>
             </CCol>
             <CCol col="2" className="text-center mt-3">
-              <CButton color="secondary" variant='outline'>
+              <CButton color="secondary" layout='outline'>
                 <CIcon name="cil-lightbulb" />Outline Button
               </CButton>
             </CCol>
             <CCol col="2" className="text-center mt-3">
-              <CButton variant="ghost" color="success">
+              <CButton layout="ghost" color="success">
                 <CIcon name="cil-lightbulb" />Ghost Button
               </CButton>
             </CCol>
@@ -637,34 +637,34 @@ const Buttons = () => {
         <CCol xs="12" md="6">
           <CCard>
             <CCardHeader>
-              Block Level Buttons
+              Level Buttons
             </CCardHeader>
             <CCardBody>
               <p>Add prop <code>block</code></p>
-              <CButton color="secondary" size="lg" block>Block level button</CButton>
+              <CButton color="secondary" size="lg">Block level button</CButton>
-              <CButton color="primary" size="lg" block>Block level button</CButton>
+              <CButton color="primary" size="lg">Block level button</CButton>
-              <CButton color="success" size="lg" block>Block level button</CButton>
+              <CButton color="success" size="lg">Block level button</CButton>
-              <CButton color="info" size="lg" block>Block level button</CButton>
+              <CButton color="info" size="lg">Block level button</CButton>
-              <CButton color="warning" size="lg" block>Block level button</CButton>
+              <CButton color="warning" size="lg">Block level button</CButton>
-              <CButton color="danger" size="lg" block>Block level button</CButton>
+              <CButton color="danger" size="lg">Block level button</CButton>
-              <CButton color="link" size="lg" block>Block level button</CButton>
+              <CButton color="link" size="lg">Block level button</CButton>
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" md="6">
           <CCard>
             <CCardHeader>
-              Block Level Buttons
+              Level Buttons
             </CCardHeader>
             <CCardBody>
               <p>Add prop <code>block</code></p>
-              <CButton variant="outline" color="secondary" size="lg" block>Block level button</CButton>
+              <CButton layout="outline" color="secondary" size="lg">Block level button</CButton>
-              <CButton variant="outline" color="primary" size="lg" block>Block level button</CButton>
+              <CButton layout="outline" color="primary" size="lg">Block level button</CButton>
-              <CButton variant="outline" color="success" size="lg" block>Block level button</CButton>
+              <CButton layout="outline" color="success" size="lg">Block level button</CButton>
-              <CButton variant="outline" color="info" size="lg" block>Block level button</CButton>
+              <CButton layout="outline" color="info" size="lg">Block level button</CButton>
-              <CButton variant="outline" color="warning" size="lg" block>Block level button</CButton>
+              <CButton layout="outline" color="warning" size="lg">Block level button</CButton>
-              <CButton variant="outline" color="danger" size="lg" block>Block level button</CButton>
+              <CButton layout="outline" color="danger" size="lg">Block level button</CButton>
-              <CButton variant="ghost" color="info" size="lg" block>Block level button</CButton>
+              <CButton layout="ghost" color="info" size="lg">Block level button</CButton>
             </CCardBody>
           </CCard>
         </CCol>

src/views/dashboard/Dashboard.js

@@ -110,7 +110,7 @@ const Dashboard = () => {
       <WidgetsBrand withCharts/>
 
       <CRow>
-        <CCol>
+        <CCol xs>
           <CCard>
             <CCardHeader>
               Traffic {' & '} Sales

src/views/notifications/alerts/Alerts.js

@@ -1,15 +1,18 @@
 import React from 'react'
+import {
+  CLink,
+} from '@coreui/react'
 import {
   CAlert,
+  CAlertHeading,
   CButton,
   CCard,
   CCardBody,
   CCardHeader,
   CCol,
-  CLink,
   CProgress,
-  CRow
+  CRow,
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Alerts = () => {
@@ -120,7 +123,7 @@ const Alerts = () => {
             </CCardHeader>
             <CCardBody>
               <CAlert color="success">
-                <h4 className="alert-heading">Well done!</h4>
+                <CAlertHeading>Well done!</CAlertHeading>
                 <p>
                   Aww yeah, you successfully read this important alert message. This example text is going
                   to run a bit longer so that you can see how spacing within an alert works with this kind
@@ -143,7 +146,7 @@ const Alerts = () => {
             <CCardBody>
               <CAlert
                 color="info"
-                closeButton
+                dismissible
               >
                 I am an dismissible alert!
               </CAlert>

src/views/notifications/badges/Badges.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import {
-  CBadge,
   CButton,
   CCard,
   CCardBody,
   CCardFooter,
   CCardHeader,
   CCol,
+  CBadge,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Badges = () => {
@@ -58,30 +58,30 @@ const Badges = () => {
             <small> pill badges</small>
           </CCardHeader>
           <CCardBody>
-            <CBadge className="mr-1" color="primary" shape="pill">Primary</CBadge>
+            <CBadge className="mr-1" color="primary" shape="rounded-pill">Primary</CBadge>
-            <CBadge className="mr-1" color="secondary" shape="pill">Secondary</CBadge>
+            <CBadge className="mr-1" color="secondary" shape="rounded-pill">Secondary</CBadge>
-            <CBadge className="mr-1" color="success" shape="pill">Success</CBadge>
+            <CBadge className="mr-1" color="success" shape="rounded-pill">Success</CBadge>
-            <CBadge className="mr-1" color="danger" shape="pill">Danger</CBadge>
+            <CBadge className="mr-1" color="danger" shape="rounded-pill">Danger</CBadge>
-            <CBadge className="mr-1" color="warning" shape="pill">Warning</CBadge>
+            <CBadge className="mr-1" color="warning" shape="rounded-pill">Warning</CBadge>
-            <CBadge className="mr-1" color="info" shape="pill">Info</CBadge>
+            <CBadge className="mr-1" color="info" shape="rounded-pill">Info</CBadge>
-            <CBadge className="mr-1" color="light" shape="pill">Light</CBadge>
+            <CBadge className="mr-1" color="light" shape="rounded-pill">Light</CBadge>
-            <CBadge className="mr-1" color="dark" shape="pill">Dark</CBadge>
+            <CBadge className="mr-1" color="dark" shape="rounded-pill">Dark</CBadge>
           </CCardBody>
         </CCard>
         <CCard>
           <CCardHeader>
             Badges
-            <small> links</small>
+            <small> square badges</small>
           </CCardHeader>
           <CCardBody>
-            <CBadge className="mr-1" href="#" color="primary">Primary</CBadge>
+            <CBadge className="mr-1" color="primary" shape="rounded-0">Primary</CBadge>
-            <CBadge className="mr-1" href="#" color="secondary">Secondary</CBadge>
+            <CBadge className="mr-1" color="secondary" shape="rounded-0">Secondary</CBadge>
-            <CBadge className="mr-1" href="#" color="success">Success</CBadge>
+            <CBadge className="mr-1" color="success" shape="rounded-0">Success</CBadge>
-            <CBadge className="mr-1" href="#" color="danger">Danger</CBadge>
+            <CBadge className="mr-1" color="danger" shape="rounded-0">Danger</CBadge>
-            <CBadge className="mr-1" href="#" color="warning">Warning</CBadge>
+            <CBadge className="mr-1" color="warning" shape="rounded-0">Warning</CBadge>
-            <CBadge className="mr-1" href="#" color="info">Info</CBadge>
+            <CBadge className="mr-1" color="info" shape="rounded-0">Info</CBadge>
-            <CBadge className="mr-1" href="#" color="light">Light</CBadge>
+            <CBadge className="mr-1" color="light" shape="rounded-0">Light</CBadge>
-            <CBadge className="mr-1" href="#" color="dark" shape="pill">Dark</CBadge>
+            <CBadge className="mr-1" color="dark" shape="rounded-0">Dark</CBadge>
           </CCardBody>
         </CCard>
       </CCol>

src/views/notifications/modals/Modals.js

@@ -11,7 +11,7 @@ import {
   CModalHeader,
   CModalTitle,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Modals = () => {
@@ -27,15 +27,15 @@ const Modals = () => {
 
   return (
     <CRow>
-      <CCol>
+      <CCol xs>
         <CCard>
           <CCardHeader>
             Bootstrap Modals
             <DocsLink name="CModal"/>
           </CCardHeader>
           <CCardBody>
-            <CButton 
+            <CButton
-              onClick={() => setModal(!modal)} 
+              onClick={() => setModal(!modal)}
               className="mr-1"
             >Launch demo modal</CButton>
             <CButton onClick={() => setLarge(!large)} className="mr-1">
@@ -44,8 +44,8 @@ const Modals = () => {
             <CButton onClick={() => setSmall(!large)} className="mr-1">
               Launch small modal
             </CButton>
-            <CModal 
+            <CModal
-              show={modal} 
+              visible={modal}
               onClose={setModal}
             >
               <CModalHeader closeButton>
@@ -60,16 +60,16 @@ const Modals = () => {
               </CModalBody>
               <CModalFooter>
                 <CButton color="primary">Do Something</CButton>{' '}
-                <CButton 
+                <CButton
-                  color="secondary" 
+                  color="secondary"
                   onClick={() => setModal(false)}
                 >Cancel</CButton>
               </CModalFooter>
             </CModal>
 
 
-            <CModal 
+            <CModal
-              show={large} 
+              visible={large}
               onClose={() => setLarge(!large)}
               size="lg"
             >
@@ -89,8 +89,8 @@ const Modals = () => {
               </CModalFooter>
             </CModal>
 
-            <CModal 
+            <CModal
-              show={small} 
+              visible={small}
               onClose={() => setSmall(!small)}
               size="sm"
             >
@@ -120,8 +120,8 @@ const Modals = () => {
             <CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
             <CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
 
-            <CModal 
+            <CModal
-              show={primary} 
+              visible={primary}
               onClose={() => setPrimary(!primary)}
               color="primary"
             >
@@ -145,8 +145,8 @@ const Modals = () => {
               </CModalFooter>
             </CModal>
 
-            <CModal 
+            <CModal
-              show={success} 
+              visible={success}
               onClose={() => setSuccess(!success)}
               color="success"
             >
@@ -166,8 +166,8 @@ const Modals = () => {
               </CModalFooter>
             </CModal>
 
-            <CModal 
+            <CModal
-              show={warning} 
+              visible={warning}
               onClose={() => setWarning(!warning)}
               color="warning"
             >
@@ -187,8 +187,8 @@ const Modals = () => {
               </CModalFooter>
             </CModal>
 
-            <CModal 
+            <CModal
-              show={danger} 
+              visible={danger}
               onClose={() => setDanger(!danger)}
               color="danger"
             >
@@ -208,8 +208,8 @@ const Modals = () => {
               </CModalFooter>
             </CModal>
 
-            <CModal 
+            <CModal
-              show={info} 
+              visible={info}
               onClose={() => setInfo(!info)}
               color="info"
             >

src/views/widgets/Widgets.js

@@ -1,15 +1,19 @@
 import React from 'react'
 import {
-  CCardGroup,
   CCardFooter,
   CCol,
-  CLink,
   CRow,
+  CProgress,
+} from '@coreui/react'
+
+import {
+  CCardGroup,
+  CLink,
   CWidgetProgress,
   CWidgetIcon,
   CWidgetProgressIcon,
   CWidgetSimple,
-  CProgress,
+
 } from '@coreui/react'
 import WidgetsBrand from './WidgetsBrand'
 import WidgetsDropdown from './WidgetsDropdown'
@@ -94,7 +98,7 @@ const Widgets = () => {
           <CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
             <CIcon width={24} name="cil-bell"/>
           </CWidgetIcon>
-            
+
         </CCol>
         <CCol xs="12" sm="6" lg="4">
           <CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
@@ -107,17 +111,17 @@ const Widgets = () => {
           </CWidgetIcon>
         </CCol>
         <CCol xs="12" sm="6" lg="4">
-          <CWidgetIcon 
+          <CWidgetIcon
-            text="income" 
+            text="income"
-            header="$1.999,50" 
+            header="$1.999,50"
-            color="warning" 
+            color="warning"
             iconPadding={false}
             footerSlot={
               <CCardFooter className="card-footer px-3 py-2">
                 <CLink
                   className="font-weight-bold font-xs btn-block text-muted"
                   href="https://coreui.io/"
-                  rel="noopener norefferer" 
+                  rel="noopener norefferer"
                   target="_blank"
                 >
                   View more