### Install Node.js Dependencies

Source: https://github.com/coreui/coreui-react/blob/main/README.md

Installs the necessary Node.js dependencies for the project. Run this command before other setup steps.

```bash
yarn install
npm install
```

--------------------------------

### Install Chart.js React Wrapper (npm)

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Install the @coreui/react-chartjs package using npm.

```bash
npm install @coreui/react-chartjs
```

--------------------------------

### Image Alignment (Start)

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/image/index.mdx

Align images using the `align` property. This example demonstrates left alignment.

```jsx
import React from 'react'

import { CImage } from '@coreui/react'

const ImageAligningExample = () => {
  return <CImage align="start" src="/images/react.jpg" alt="react.jpg" />
}

export { ImageAligningExample }
```

--------------------------------

### Install CoreUI CSS

Source: https://github.com/coreui/coreui-react/blob/main/README.md

Install the CoreUI CSS library using yarn or npm.

```bash
yarn add @coreui/coreui
```

```bash
npm install @coreui/coreui --save
```

--------------------------------

### Install Chart.js React Wrapper (Yarn)

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Install the @coreui/react-chartjs package using Yarn.

```bash
yarn add @coreui/react-chartjs
```

--------------------------------

### Install CoreUI React Icons with Npm

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/icon.mdx

Install the CoreUI icons and icons-react packages using npm.

```bash
npm install @coreui/icons @coreui/icons-react 
```

--------------------------------

### Live React Toast Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/toast/index.mdx

Provides a live example of a React Toast that can be triggered and displayed. This showcases the dynamic nature of toasts.

```jsx
import React, { useState } from 'react'
import {
  CButton,
  CToast,
  CToastBody,
  CToastClose,
  CToastHeader,
} from '@coreui/react'

const ToastLiveExample = () => {
  const [show, setShow] = useState(false)

  return (
    <>
      <CButton onClick={() => setShow(!show)}>Toggle toast</CButton>
      <CToast show={show} onClose={() => setShow(false)}>
        <CToastHeader closeButton>Toast header</CToastHeader>
        <CToastBody>React Toast body</CToastBody>
      </CToast>
    </>
  )
}

export default ToastLiveExample
```

--------------------------------

### Install Bootstrap CSS

Source: https://github.com/coreui/coreui-react/blob/main/README.md

Install the Bootstrap CSS library using yarn or npm.

```bash
yarn add bootstrap
```

```bash
npm install bootstrap
```

--------------------------------

### Tab Panes Example with Different Content

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/navs-tabs/bootstrap.mdx

Another example demonstrating tab panes with distinct content for each tab.

```jsx
import React, { useState } from 'react'

import {
  CNav,
  CNavItem,
  CNavLink,
  CTabContent,
  CTabPane,
} from '@coreui/react'

const NavTabPanes2Example = () => {
  const [activeKey, setActiveKey] = useState(1)

  return (
    <>
      <CNav variant="pills" activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
        <CNavItem>
          <CNavLink eventKey={1}>Pills 1</CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink eventKey={2}>Pills 2</CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink eventKey={3}>Pills 3</CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink eventKey={4} disabled>
            Disabled
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane eventKey={1} visible={activeKey === 1}>
          Tart Iure
        </CTabPane>
        <CTabPane eventKey={2} visible={activeKey === 2}>
          Tart II
        </CTabPane>
        <CTabPane eventKey={3} visible={activeKey === 3}>
          Tart III
        </CTabPane>
        <CTabPane eventKey={4} visible={activeKey === 4}>
          Disabled Content
        </CTabPane>
      </CTabContent>
    </>
  )
}

export default NavTabPanes2Example
```

--------------------------------

### Base Nav Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/navs-tabs/bootstrap.mdx

A basic example of the React Bootstrap Nav component.

```jsx
import React from 'react'

import {
  CNav,
  CNavItem,
  CNavLink,
  CTabContent,
  CTabPane,
} from '@coreui/react'

const NavExample = () => {
  return (
    <CNav variant="tabs">
      <CNavItem>
        <CNavLink>Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink active>Link active</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink disabled>Link disabled</CNavLink>
      </CNavItem>
    </CNav>
  )
}

export default NavExample
```

--------------------------------

### Basic Placeholder Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/placeholder/index.mdx

This example demonstrates how to create a loading card using placeholders, maintaining the same size and proportions as a typical card component.

```jsx
import React from 'react'

import {
  CPlaceholder,
  CCard,
  CCardImage,
  CCardBody,
  CCardTitle,
  CCardText,
} from '@coreui/react'

const PlaceholderExample = () => {
  return (
    <CCard style={{ width: '18rem' }}>
      <CCar dImage src="https://coreui.io/images/react/7.jpg" top />
      <CCardBody>
        <CCardTitle>
          <CPlaceholder xs={6} />
        </CCardTitle>
        <CCardText>
          <CPlaceholder xs={7} />
          <CPlaceholder xs={4} />
          <CPlaceholder xs={4} />
          <CPlaceholder xs={6} />
          <CPlaceholder xs={8} />
        </CCardText>
      </CCardBody>
    </CCard>
  )
}

export default PlaceholderExample
```

--------------------------------

### Install CoreUI React Icons with Yarn

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/icon.mdx

Install the CoreUI icons and icons-react packages using yarn.

```bash
yarn add @coreui/icons @coreui/icons-react 
```

--------------------------------

### Install CoreUI with Npm

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/getting-started/introduction.mdx

Install the CoreUI React package and its core dependencies using npm.

```bash
npm install @coreui/react @coreui/coreui
```

--------------------------------

### React Callout Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/callout/index.mdx

A basic example demonstrating the usage of the React Callout component.

```jsx
import React from 'react'

import { CCallout } from '@coreui/react'

const CalloutExample = () => {
  return (
    <>
      <CCallout color="info">
        <div className="fw-semibold">Info Callout</div>
        Example defining the info callout, which can be used to present additional not important information.
      </CCallout>
      <CCallout color="success">
        <div className="fw-semibold">Success Callout</div>
        Example defining the success callout.
      </CCallout>
      <CCallout color="warning">
        <div className="fw-semibold">Warning Callout</div>
        Example defining the warning callout.
      </CCallout>
      <CCallout color="danger">
        <div className="fw-semibold">Danger Callout</div>
        Example defining the danger callout.
      </CCallout>
    </>
  )
}

export default CalloutExample
```

--------------------------------

### Install CoreUI PRO with Npm

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/getting-started/introduction.mdx

Install the CoreUI PRO React package and its core dependencies using npm.

```bash
npm install @coreui/react-pro @coreui/coreui-pro
```

--------------------------------

### React Pagination Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/pagination/index.mdx

Basic example of the CoreUI React Pagination component. Use this for standard pagination needs.

```jsx
import React from 'react'

import {
  CPagination,
  CPaginationItem,
} from '@coreui/react'

const PaginationExample = () => {
  return (
    <CPagination aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

export default PaginationExample
```

--------------------------------

### Progress Bar Height Example 2

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/progress/index.mdx

Another example demonstrating the height adjustment of progress bars.

```jsx
<CProgressHeight2Example />
```

--------------------------------

### Placeholder Sizing Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/placeholder/index.mdx

This example shows how to adjust the size of placeholders using the 'size' prop. Available options are 'lg', 'sm', and 'xs'.

```jsx
import React from 'react'

import {
  CPlaceholder,
  CRow,
  CCol,
} from '@coreui/react'

const PlaceholderSizingExample = () => {
  return (
    <CRow>
      <CCol xs={6} md={4} lg={3}>
        <CPlaceholder xs={12} size="lg" />
      </CCol>
      <CCol xs={6} md={4} lg={3}>
        <CPlaceholder xs={12} />
      </CCol>
      <CCol xs={6} md={4} lg={3}>
        <CPlaceholder xs={12} size="sm" />
      </CCol>
      <CCol xs={6} md={4} lg={3}>
        <CPlaceholder xs={12} size="xs" />
      </CCol>
    </CRow>
  )
}

export default PlaceholderSizingExample
```

--------------------------------

### Install react-imask using Npm

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/input-mask/index.mdx

Install the `react-imask` library using npm. This is a prerequisite for extending CoreUI for React components with input masking.

```bash
npm install react-imask
```

--------------------------------

### Default Select Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/select/index.mdx

A basic example of a React select component with predefined options.

```jsx
<CFormSelect aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" disabled>Three</option>
</CFormSelect>
```

--------------------------------

### Doughnut and Pie Charts Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the doughnut and pie chart components.

```jsx
<ExampleSnippet component="ChartDoughnutAndPieExample" componentName="React Chart" />
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/templates/installation.mdx

Install local dependencies for the CoreUI React Admin Template. Use either npm or yarn.

```bash
npm install
```

```bash
yarn install
```

--------------------------------

### Install CoreUI CSS

Source: https://github.com/coreui/coreui-react/blob/main/packages/coreui-react/README.md

Install the CoreUI CSS library using yarn. This package provides the necessary styles for CoreUI components.

```bash
yarn add @coreui/coreui
```

--------------------------------

### Install react-imask using Yarn

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/input-mask/index.mdx

Install the `react-imask` library using yarn. This is a prerequisite for extending CoreUI for React components with input masking.

```bash
yarn add react-imask
```

--------------------------------

### Install CoreUI CSS with npm

Source: https://github.com/coreui/coreui-react/blob/main/packages/coreui-react/README.md

Install the CoreUI CSS library using npm. This package provides the necessary styles for CoreUI components.

```bash
npm install @coreui/coreui --save
```

--------------------------------

### Spinner Placement with Flexbox (Second Example)

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/spinner/index.mdx

Another example of spinner alignment using flexbox utilities, showing different justification.

```jsx
import React from 'react'

import {
  CSpinner,
} from '@coreui/react'

const SpinnerBorderPlacementFlex2Example = () => {
  return (
    <div className="d-flex align-items-center">
      <CSpinner className="me-3" />
      <strong>Loading...</strong>
    </div>
  )
}

export { SpinnerBorderPlacementFlex2Example }
```

--------------------------------

### File Input Examples

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/form-control.mdx

Demonstrates various file input configurations, including default, multiple files, disabled, small, and large sizes.

```jsx
<div className="mb-3">
  <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
  <CFormInput type="file" id="formFile"/>
</div>
<div className="mb-3">
  <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
  <CFormInput type="file" id="formFileMultiple" multiple/>
</div>
<div className="mb-3">
  <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
  <CFormInput type="file" id="formFileDisabled" disabled/>
</div>
<div className="mb-3">
  <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
  <CFormInput type="file" size="sm" id="formFileSm"/>
</div>
<div>
  <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
  <CFormInput type="file" size="lg" id="formFileLg"/>
</div>
```

--------------------------------

### Run Development Server

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/templates/installation.mdx

Start a local development server to view the template. This command compiles assets and serves the application.

```bash
npm start
```

```bash
yarn start
```

--------------------------------

### Spinner Placement with Floats

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/spinner/index.mdx

Use float utilities to position spinners. This example floats the spinner to the start.

```jsx
import React from 'react'

import {
  CSpinner,
} from '@coreui/react'

const SpinnerBorderPlacementFloatsExample = () => {
  return (
    <>
      <CSpinner className="float-start" />
      <CSpinner className="float-end" />
    </>
  )
}

export { SpinnerBorderPlacementFloatsExample }
```

--------------------------------

### Input Group Button Addons Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/input-group/index.mdx

Illustrates using buttons as addons within an input group. This example places buttons on both sides of the input.

```jsx
import React from 'react';

import {
  CButton,
  CFormInput,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react';

const InputGroupButtonAddonsExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary">Button</CButton>
        <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" />
      </CInputGroup>
      <CInputGroup className="mb-3">
        <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" />
        <CButton type="button" color="secondary">Button</CButton>
      </CInputGroup>
      <CInputGroup className="mb-3">
        <CButton type="button" color="secondary">Button</CButton>
        <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" />
        <CButton type="button" color="secondary">Button</CButton>
      </CInputGroup>
    </>
  );
};

export default InputGroupButtonAddonsExample;
```

--------------------------------

### Navbar Placement Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/navbar/index.mdx

Demonstrates various placement options for the navbar, including static, fixed, and sticky top.

```jsx
import React from 'react'

import {
  CContainer,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CCollapse,
  CDropdown,
  CDropdownToggle,
  CDropdownMenu,
  CDropdownItem,
  CNavLink,
} from '@coreui/react'

const NavbarPlacementExample = () => {
  return (
    <CNavbar expand="lg" colorScheme="light" className="bg-light">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CNavbarToggler aria-controls="navbarExample3" />
        <CCollapse className="navbar-collapse" id="navbarExample3">
          <CNavbarNav className="me-auto mb-2 mb-lg-0">
            <CNavLink href="#" active>
              Home
            </CNavLink>
            <CNavLink href="#">Link</CNavLink>
            <CDropdown>
              <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownItem href="#">Something else here</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          </CNavbarNav>
        </CCollapse>
      </CContainer>
    </CNavbar>
  )
}

export default NavbarPlacementExample
```

--------------------------------

### React Pagination Alignment Left

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/pagination/index.mdx

Example of left-aligned CoreUI React Pagination. Use the `align="start"` prop for left alignment.

```jsx
import React from 'react'

import {
  CPagination,
  CPaginationItem,
} from '@coreui/react'

const PaginationAlignmentExample = () => {
  return (
    <CPagination align="start" aria-label="Page navigation example">
      <CPaginationItem disabled>Previous</CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem>Next</CPaginationItem>
    </CPagination>
  )
}

export default PaginationAlignmentExample
```

--------------------------------

### Card Image Overlays Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/card/index.mdx

Shows how to use an image as a background for card content, creating an image overlay effect.

```jsx
import React from 'react'

import {
  CCard, CCardBody, CCardImage, CCardText, CCardTitle,
  CCol, CRow
} from '@coreui/react'

const CardImageOverlaysExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CCard className="text-white">
          <CCardImage src="https://coreui.io/images/react.jpg" />
          <CCardBody>
            <CCardTitle>Card title</CCardTitle>
            <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
            <CCardText>Last updated 3 mins ago</CCardText>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}

export { CardImageOverlaysExample }
```

--------------------------------

### Decorative Icon Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/icon.mdx

For purely decorative icons, the `CIcon` component automatically adds `aria-hidden=true` to ensure screen readers ignore it. No additional setup is required.

```jsx
<CButton>
  <CIcon icon={cilCloudDownload} />
</CButton>
```

--------------------------------

### Basic Header Usage

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/header.mdx

This example demonstrates a basic responsive header with navigation links, a dropdown, and a search form. It utilizes the CHeader, CContainer, CHeaderBrand, CHeaderToggler, CCollapse, CHeaderNav, CNavItem, CNavLink, CDropdown, CForm, CFormInput, and CButton components. The header collapses at the 'lg' breakpoint.

```jsx
const [visible, setVisible] = useState(false)
return (
  <>
    <CHeader>
      <CContainer fluid>
        <CHeaderBrand href="#">Header</CHeaderBrand>
        <CHeaderToggler onClick={() => setVisible(!visible)} />
        <CCollapse className="header-collapse" visible={visible}>
          <CHeaderNav>
            <CNavItem>
              <CNavLink href="#" active>
                Home
              </CNavLink>
            </CNavItem>
            <CNavItem>
              <CNavLink href="#">Link</CNavLink>
            </CNavItem>
            <CDropdown variant="nav-item">
              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem href="#">Action</CDropdownItem>
                <CDropdownItem href="#">Another action</CDropdownItem>
                <CDropdownDivider />
                <CDropdownItem href="#">Something else here</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
            <CNavItem>
              <CNavLink href="#" disabled>
                Disabled
              </CNavLink>
            </CNavItem>
          </CHeaderNav>
          <CForm className="d-flex">
            <CFormInput className="me-2" type="search" placeholder="Search" />
            <CButton type="submit" color="success" variant="outline">
              Search
            </CButton>
          </CForm>
        </CCollapse>
      </CContainer>
    </CHeader>
  </>
)
```

--------------------------------

### Responsive Row Columns Across Breakpoints

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/layout/grid.mdx

Build a responsive grid that changes column count at different breakpoints. This example starts with 1 column, then 2, then 4.

```jsx
<CContainer>
  <CRow xs={{ cols: 1 }} sm={{ cols: 2 }} md={{ cols: 4 }}>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
    <CCol>Column</CCol>
  </CRow>
</CContainer>
```

--------------------------------

### Align Dropdown Menu

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/api/CDropdown.api.mdx

Use the `alignment` property to control where the dropdown menu appears relative to the toggle. This example aligns the menu to the end on large screens and to the start on smaller ones.

```jsx
// Align dropdown menu to the end on large devices, otherwise start
<CDropdown alignment={{ lg: 'end', xs: 'start' }}>
  <CDropdownToggle>Toggle dropdown</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem>Action</CDropdownItem>
    <CDropdownItem>Another Action</CDropdownItem>
  </CDropdownMenu>
</CDropdown>
```

--------------------------------

### Table with Footer Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/table/bootstrap.mdx

Demonstrates how to create a table with a footer using the `footer` prop. This includes defining columns, footer content, and table items. The `tableHeadProps` can also be applied for styling the header.

```jsx
export const TableFoodExample = () => {
  const columns = [
    {
      key: 'id',
      label: '#',
      _props: { scope: 'col' },
    },
    {
      key: 'class',
      _props: { scope: 'col' },
    },
    {
      key: 'heading_1',
      label: 'Heading',
      _props: { scope: 'col' },
    },
    {
      key: 'heading_2',
      label: 'Heading',
      _props: { scope: 'col' },
    },
  ]
  const footer = [
    'Footer',
    'Footer',
    'Footer',
    'Footer',
  ]
  const items = [
    {
      id: 1,
      class: 'Mark',
      heading_1: 'Otto',
      heading_2: '@mdo',
      _cellProps: { id: { scope: 'row' } },
    },
    {
      id: 2,
      class: 'Jacob',
      heading_1: 'Thornton',
      heading_2: '@fat',
      _cellProps: { id: { scope: 'row' } },
    },
    {
      id: 3,
      class: 'Larry the Bird',
      heading_2: '@twitter',
      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
    },
  ]
  return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }} />
}
```

```jsx
<CTable>
  <CTableHead color="light">
    ...
  </CTableHead>
  <CTableBody>
    ...
  <CTableHead>
    <CTableRow>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
      <CTableDataCell>Footer</CTableDataCell>
    </CTableRow>
  </CTableHead>
</CTable>
```

```jsx
const columns = [...] 
const footer = [
  'Footer',
  'Footer',
  'Footer',
  'Footer',
]
const items = [...] 

return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }}/>
```

--------------------------------

### Override Body Background and Color with Traditional Sass Imports

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/customize/sass.mdx

This example demonstrates how to override Sass variables in a traditional Sass setup. Variable overrides must be placed after importing CoreUI functions and before importing other CoreUI components.

```scss
// Required
@import "../node_modules/@coreui/coreui/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/@coreui/coreui/scss/variables";
@import "../node_modules/@coreui/coreui/scss/maps";
@import "../node_modules/@coreui/coreui/scss/mixins";
@import "../node_modules/@coreui/coreui/scss/root";

// Optional CoreUI components here
@import "../node_modules/@coreui/coreui/scss/reboot";
@import "../node_modules/@coreui/coreui/scss/type";
// etc
```

--------------------------------

### Link Local Packages and Install Dependencies

Source: https://github.com/coreui/coreui-react/blob/main/README.md

Links local packages together and installs any remaining package dependencies. This is a crucial step after installing base dependencies.

```bash
yarn bootstrap
npm run bootstrap
```

--------------------------------

### CWidgetStatsF Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/widgets/index.mdx

Example usage of the CWidgetStatsF component for displaying statistics.

```jsx
import React from 'react'

import {
  CWidgetStatsF,
} from '@coreui/react-components'

const WidgetStatsFExample = () => {
  return (
    <CWidgetStatsF
      title="Income"
      value="$1,345.67"
      mainChartChange={+23.56 %}
      mainChartData={
        {
          labels: 'My First dataset',
          datasets: [
            {
              label: 'My First dataset',
              backgroundColor: 'rgba(255,255,255,.2)',
              borderColor: 'rgba(255,255,255,.55)',
              data: [78, 81, 56, 34, 55, 40, 12],
            },
          ],
        }
      }
      mainChartOptions={{
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          },
        },
      }}
    />
  )
}

export default WidgetStatsFExample

```

--------------------------------

### CWidgetStatsE Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/widgets/index.mdx

Example usage of the CWidgetStatsE component for displaying statistics.

```jsx
import React from 'react'

import {
  CWidgetStatsE,
} from '@coreui/react-components'

const WidgetStatsEExample = () => {
  return (
    <CWidgetStatsE
      title="Income"
      value="$1,345.67"
      mainChartChange={+23.56 %}
      mainChartData={
        {
          labels: 'My First dataset',
          datasets: [
            {
              label: 'My First dataset',
              backgroundColor: 'rgba(255,255,255,.2)',
              borderColor: 'rgba(255,255,255,.55)',
              data: [78, 81, 56, 34, 55, 40, 12],
            },
          ],
        }
      }
      mainChartOptions={{
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          },
        },
      }}
    />
  )
}

export default WidgetStatsEExample

```

--------------------------------

### CWidgetStatsD Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/widgets/index.mdx

Example usage of the CWidgetStatsD component for displaying statistics.

```jsx
import React from 'react'

import {
  CWidgetStatsD,
} from '@coreui/react-components'

const WidgetStatsDExample = () => {
  return (
    <CWidgetStatsD
      title="Income"
      value="$1,345.67"
      mainChartChange={+23.56 %}
      mainChartData={
        {
          labels: 'My First dataset',
          datasets: [
            {
              label: 'My First dataset',
              backgroundColor: 'rgba(255,255,255,.2)',
              borderColor: 'rgba(255,255,255,.55)',
              data: [78, 81, 56, 34, 55, 40, 12],
            },
          ],
        }
      }
      mainChartOptions={{
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          },
        },
      }}
    />
  )
}

export default WidgetStatsDExample

```

--------------------------------

### Column Sizing Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/layout/index.mdx

Demonstrates how to use specific column classes to control the width distribution within a row.

```jsx
import React from 'react'

import {
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CFormInput,
  CRow,
} from '@coreui/react'

const LayoutColumnSizingExample = () => {
  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4">
          <CCardHeader>
            <strong>React Column Sizing</strong> <small>Example</small>
          </CCardHeader>
          <CCardBody>
            <p className="text-medium-emphasis small">As shown in the previous examples, our grid system allows you to place any number of <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow></code>. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally split the rest, with specific column classes like <code>&lt;CCol sm={7} &gt;</code>.</p>
            <CRow>
              <CCol sm={7}>
                <CFormInput id="input11" label="Input 07" placeholder="Write something..."></CFormInput>
              </CCol>
              <CCol sm={5}>
                <CFormInput id="input12" label="Input 08" placeholder="Write something..."></CFormInput>
              </CCol>
            </CRow>
            <CRow className="mt-3">
              <CCol sm={5}>
                <CFormInput id="input13" label="Input 09" placeholder="Write something..."></CFormInput>
              </CCol>
              <CCol sm={5}>
                <CFormInput id="input14" label="Input 10" placeholder="Write something..."></CFormInput>
              </CCol>
              <CCol sm={2}>
                <CFormInput id="input15" label="Input 11" placeholder="Write something..."></CFormInput>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}

export default LayoutColumnSizingExample

```

--------------------------------

### CWidgetStatsC Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/widgets/index.mdx

Example usage of the CWidgetStatsC component for displaying statistics.

```jsx
import React from 'react'

import {
  CWidgetStatsC,
} from '@coreui/react-components'

const WidgetStatsCExample = () => {
  return (
    <CWidgetStatsC
      title="Income"
      value="$1,345.67"
      mainChartChange={+23.56 %}
      mainChartData={
        {
          labels: 'My First dataset',
          datasets: [
            {
              label: 'My First dataset',
              backgroundColor: 'rgba(255,255,255,.2)',
              borderColor: 'rgba(255,255,255,.55)',
              data: [78, 81, 56, 34, 55, 40, 12],
            },
          ],
        }
      }
      mainChartOptions={{
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          },
        },
      }}
    />
  )
}

export default WidgetStatsCExample

```

--------------------------------

### Basic Grid Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/layout/grid.mdx

Creates three equal-width columns across all devices and viewports using predefined grid classes. The columns are centered within a parent CContainer.

```jsx
<CContainer>
  <CRow>
    <CCol sm="auto">One of three columns</CCol>
    <CCol sm="auto">One of three columns</CCol>
    <CCol sm="auto">One of three columns</CCol>
  </CRow>
</CContainer>
```

--------------------------------

### CWidgetStatsB Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/widgets/index.mdx

Example usage of the CWidgetStatsB component for displaying statistics.

```jsx
import React from 'react'

import {
  CWidgetStatsB,
} from '@coreui/react-components'

const WidgetStatsBExample = () => {
  return (
    <CWidgetStatsB
      title="Income"
      value="$1,345.67"
      mainChartChange={+23.56 %}
      mainChartData={
        {
          labels: 'My First dataset',
          datasets: [
            {
              label: 'My First dataset',
              backgroundColor: 'rgba(255,255,255,.2)',
              borderColor: 'rgba(255,255,255,.55)',
              data: [78, 81, 56, 34, 55, 40, 12],
            },
          ],
        }
      }
      mainChartOptions={{
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          },
        },
      }}
    />
  )
}

export default WidgetStatsBExample

```

--------------------------------

### Basic Footer Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/footer.mdx

A simple footer with copyright information and a link to CoreUI.

```jsx
import { CFooter, CLink } from '@coreui/react'

<CFooter>
  <div>
    <CLink href="https://coreui.io">CoreUI</CLink>
    <span>&copy; 2026 creativeLabs.</span>
  </div>
  <div>
    <span>Powered by</span>
    <CLink href="https://coreui.io">CoreUI</CLink>
  </div>
</CFooter>
```

--------------------------------

### CWidgetStatsA Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/widgets/index.mdx

Example usage of the CWidgetStatsA component for displaying statistics.

```jsx
import React from 'react'

import {
  CWidgetStatsA,
} from '@coreui/react-components'

const WidgetStatsAExample = () => {
  return (
    <CWidgetStatsA
      chartData={
        {
          labels: 'January',
          datasets: [
            {
              label: 'My First dataset',
              backgroundColor: 'rgba(255,255,255,.1)',
              borderColor: 'rgba(255,255,255,.55)',
              data: [65, 59, 84, 54, 55, 40, 50],
            },
          ],
        }
      }
      title="Income"
      value="$1,345.67"
      footer="See all accounts"
    />
  )
}

export default WidgetStatsAExample

```

--------------------------------

### Live Demo of React Popover

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/popover/index.mdx

Demonstrates a basic live example of the React Popover component.

```jsx
<ExampleSnippet component="PopoverLiveExample" componentName="React Popover" />
```

--------------------------------

### Scatter Chart Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the scatter chart component.

```jsx
<ExampleSnippet component="ChartScatterExample" componentName="React Chart" />
```

--------------------------------

### Bubble Chart Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the bubble chart component.

```jsx
<ExampleSnippet component="ChartBubbleExample" componentName="React Chart" />
```

--------------------------------

### Radar Chart Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the radar chart component.

```jsx
<ExampleSnippet component="ChartRadarExample" componentName="React Chart" />
```

--------------------------------

### Basic Navbar Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/navbar/index.mdx

A responsive light-themed navbar that automatically collapses at the lg breakpoint, demonstrating the integration of various sub-components.

```jsx
<CNavbar expand="lg" colorScheme="light" className="bg-light">
  <CContainer fluid>
    <CNavbarBrand href="#">Navbar</CNavbarBrand>
    <CNavbarToggler aria-label="Toggle navigation" />
    <CCollapse className="navbar-collapse" id="navbarNav">
      <CNavbarNav>
        <CNavItem>
          <CNavLink href="#" active> Home </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#">Features</CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#">Pricing</CNavLink>
        </CNavItem>
        <CNavItem className="d-flex align-items-center">
          <CDropdown variant="nav-item">
            <CDropdownToggle color="secondary" variant="link" className="text-decoration-none py-0 border-0" style={{'--cui-dropdown-link-transform': 'translate(0, -0.1875rem)'}}>
              Dropdown
            </CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem>Action</CDropdownItem>
              <CDropdownItem>Another action</CDropdownItem>
              <CDropdownItem>Something else here</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </CNavItem>
      </CNavbarNav>
    </CCollapse>
  </CContainer>
</CNavbar>
```

--------------------------------

### Bar Chart Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the bar chart component.

```jsx
<ExampleSnippet component="ChartBarExample" componentName="React Chart" />
```

--------------------------------

### Line Chart Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the line chart component.

```jsx
<ExampleSnippet component="ChartLineExample" componentName="React Chart" />
```

--------------------------------

### Card Header with Text Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/card/index.mdx

A card example where the header contains only text.

```jsx
import React from 'react'

import {
  CCard,
  CCardBody,
  CCardHeader,
  CCardText,
} from '@coreui/react'

const CardHeader3Example = () => {
  return (
    <CCard>
      <CCardHeader>Header</CCardHeader>
      <CCardBody>
        <h5 className="card-title">Special title treatment</h5>
        <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
        <CButton href="#">Go somewhere</CButton>
      </CCardBody>
    </CCard>
  )
}

export default CardHeader3Example
```

--------------------------------

### Form Grid Layout Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/layout/index.mdx

Demonstrates using CoreUI's grid classes to create complex form layouts with multiple columns and varied widths.

```jsx
import React from 'react'

import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CRow,
} from '@coreui/react'

const LayoutFormGridExample = () => {
  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4">
          <CCardHeader>
            <strong>React Form Grid</strong> <small>Example</small>
          </CCardHeader>
          <CCardBody>
            <p className="text-medium-emphasis small">Using CoreUI's grid system, you can create complex layouts with multiple columns, varied widths, and additional alignment options.</p>
            <CRow>
              <CCol lg={6}>
                <CRow>
                  <CCol xs={12}>
                    <CFormInput type="text" id="input" label="Input 01" placeholder="Write something..."></CFormInput>
                  </CCol>
                </CRow>
              </CCol>
              <CCol lg={6}>
                <CRow>
                  <CCol xs={12}>
                    <CFormInput type="text" id="input2" label="Input 02" placeholder="Write something..."></CFormInput>
                  </CCol>
                </CRow>
              </CCol>
            </CRow>
            <CRow className="mt-3">
              <CCol xs={12}>
                <CFormInput type="text" id="input3" label="Input 03" placeholder="Write something..."></CFormInput>
              </CCol>
            </CRow>
            <CRow className="mt-3">
              <CCol xs={12}>
                <CFormInput type="text" id="input4" label="Input 04" placeholder="Write something..."></CFormInput>
              </CCol>
            </CRow>
            <CRow className="mt-3">
              <CCol xs={12}>
                <CFormInput type="text" id="input5" label="Input 05" placeholder="Write something..."></CFormInput>
              </CCol>
            </CRow>
            <CRow className="mt-3">
              <CCol xs={12}>
                <CFormInput type="text" id="input6" label="Input 06" placeholder="Write something..."></CFormInput>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}

export default LayoutFormGridExample

```

--------------------------------

### Pagination Alignment Start

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/pagination/bootstrap.mdx

Align pagination to the start using the `align` prop.

```jsx
import React from 'react'

import {
  CPagination,
  CPaginationItem,
} from '@coreui/react'

const PaginationAlignmentExample = () => {
  return (
    <CPagination align="start" aria-label="Search results pages">
      <CPaginationItem aria-label="Previous">
        &laquo;
      </CPaginationItem>
      <CPaginationItem>1</CPaginationItem>
      <CPaginationItem>2</CPaginationItem>
      <CPaginationItem>3</CPaginationItem>
      <CPaginationItem aria-label="Next">
        &raquo;
      </CPaginationItem>
    </CPagination>
  )
}

export default PaginationAlignmentExample
```

--------------------------------

### Importing CBadge

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/api/CBadge.api.mdx

Demonstrates two ways to import the CBadge component: directly from the main package or from its specific path.

```jsx
import { CBadge } from '@coreui/react'
// or
import CBadge from '@coreui/react/src/components/badge/CBadge'
```

--------------------------------

### React Form Checkbox Disabled Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/checkbox/index.mdx

Example of a disabled React form checkbox.

```jsx
import React from 'react'
import { CFormCheck } from '@coreui/react'

const CheckboxDisabledExample = () => {
  return (
    <>
      <CFormCheck id="exampleCheck" label="Disabled checkbox" disabled />
      <CFormCheck id="exampleCheck" label="Disabled checked checkbox" disabled defaultChecked />
    </>
  )
}

export default CheckboxDisabledExample
```

--------------------------------

### React Form Checkbox Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/checkbox/index.mdx

Basic example of a React form checkbox component.

```jsx
import React from 'react'
import { CFormCheck } from '@coreui/react'

const CheckboxExample = () => {
  return (
    <>
      <CFormCheck id="exampleCheck1" label="Check me out" />
      <CFormCheck id="exampleCheck2" label="Another checkbox" defaultChecked />
    </>
  )
}

export default CheckboxExample
```

--------------------------------

### Card Sizing with Utilities

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/card/index.mdx

Shows how to set card widths using CoreUI's available sizing utility classes.

```jsx
import React from 'react'

import {
  CCard, CCardBody, CCardHeader,
  CCol, CRow
} from '@coreui/react'

const CardSizing2Example = () => {
  return (
    <CRow>
      <CCol xs={4}>
        <CCard className="mb-4" style={{width: '40rem'}}>{/* ... card content ... */}</CCard>
      </CCol>
      <CCol xs={4}>
        <CCard className="mb-4" style={{width: '30rem'}}>{/* ... card content ... */}</CCard>
      </CCol>
      <CCol xs={4}>
        <CCard className="mb-4" style={{width: '20rem'}}>{/* ... card content ... */}</CCard>
      </CCol>
    </CRow>
  )
}

export { CardSizing2Example }
```

--------------------------------

### Polar Area Chart Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/chart/index.mdx

Example usage of the polar area chart component.

```jsx
<ExampleSnippet component="ChartPolarAreaExample" componentName="React Chart" />
```

--------------------------------

### Basic Form Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/overview.mdx

Demonstrates a basic form structure with email and password input fields, a checkbox, and a submit button using CoreUI React components.

```jsx
<CForm>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleInputEmail1">Email address</CFormLabel>
    <CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
    <CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
  </div>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleInputPassword1">Email Password</CFormLabel>
    <CFormInput type="password" id="exampleInputPassword1" />
  </div>
  <CFormCheck
    className="mb-3"
    label="Check me out"
    onChange={(e) => {
      console.log(e.target)
    }}
  />
  <CButton type="submit" color="primary">
    Submit
  </CButton>
</CForm>
```

--------------------------------

### Basic Input Group Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/forms/input-group/index.mdx

Demonstrates a basic input group with an addon on one side. Ensure labels are placed outside the group.

```jsx
import React from 'react';

import {
  CButton,
  CFormInput,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react';

const InputGroupExample = () => {
  return (
    <CInputGroup className="mb-3">
      <CInputGroupText id="basic-addon1">@</CInputGroupText>
      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
    </CInputGroup>
  );
};

export default InputGroupExample;
```

--------------------------------

### Standard Sidebar Example

Source: https://github.com/coreui/coreui-react/blob/main/packages/docs/content/components/sidebar/bootstrap.mdx

Demonstrates the default behavior of the sidebar, which is visible on desktop and hidden on mobile.

```jsx
import React from 'react'

import {
  CSidebar,
  CSidebarBrand,
  CSidebarNav,
  CSidebarToggler,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilBell } from '@coreui/icons'

import { AppSidebarNav } from './AppSidebarNav'

import sidebarNavbars from './_nav'

const SidebarExample = () => {
  return (
    <CSidebar className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden" position="fixed" narrow>
      <CSidebarBrand className="d-none d-md-flex" to="/">
        <CIcon className="sidebar-brand-narrow" icon={cilBell} size="lg" />
      </CSidebarBrand>
      <CSidebarNav>
        <AppSidebarNav items={sidebarNavbars} />
      </CSidebarNav>
      <CSidebarToggler className="d-none d-lg-flex" />
    </CSidebar>
  )
}

export default SidebarExample
```