### Run Development Server (npm or yarn)

Source: https://coreui.io/react/docs/templates/installation

Compiles CSS and JavaScript, builds documentation, and starts a local development server. This command allows you to preview the template in your browser during development.

```bash
npm start
```

```bash
yarn start
```

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

### Install CoreUI for React (npm)

Source: https://coreui.io/react/docs/index

Installs the CoreUI UI component library for React.js using npm. This is the standard version.

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

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

### Autocomplete - Setup and Basic Usage

Source: https://coreui.io/react/docs/forms/autocomplete/api

Demonstrates the basic setup and usage of the CoreUI React Autocomplete component, including setting initial values and handling user input.

```javascript
import React, { useState } from 'react';
import { CAutocomplete } from '@coreui/react';

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return (
    <CAutocomplete
      placeholder="Select an option..."
      options={options}
      value={selectedValue}
      onChange={(e) => setSelectedValue(e.target.value)}
    />
  );
};

export default MyComponent;
```

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

### Install Dependencies (npm or yarn)

Source: https://coreui.io/react/docs/templates/installation

Installs local dependencies required for the CoreUI React Admin Template from the `package.json` file. This step is crucial after downloading the template source files.

```bash
npm install
```

```bash
yarn install
```

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

### Install CoreUI PRO for React (npm)

Source: https://coreui.io/react/docs/index

Installs the CoreUI PRO UI component library for React.js using npm. This is the premium version.

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

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

### Install CoreUI for React (Yarn)

Source: https://coreui.io/react/docs/index

Installs the CoreUI UI component library for React.js using Yarn. This is the standard version.

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

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

### Install Bootstrap CSS

Source: https://coreui.io/react/docs/index

Installs the Bootstrap CSS framework using npm. This is required if you intend to use Bootstrap's styling with CoreUI components.

```bash
npm install bootstrap
```

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

### Basic React Smart Table (DataTable) Usage Example

Source: https://coreui.io/react/docs/components/smart-table

Demonstrates the fundamental setup for a React Smart Table component, illustrating how to initialize and display tabular data with basic functionalities. This example is intended for integration within a React application.

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

const BasicTable = () => {
  const data = [
    { id: 1, name: 'Leopold Gáspár', registered: '2010/02/01', role: 'Staff', status: 'Active' },
    { id: 2, name: 'Estavan Lykos', registered: '2018/02/07', role: 'Staff', status: 'Banned' },
    { id: 3, name: 'Avram Tarasios', registered: '2016/02/12', role: 'Staff', status: 'Banned' },
    { id: 4, name: 'Nehemiah Tatius', registered: '2013/01/05', role: 'Staff', status: 'Banned' },
    { id: 5, name: 'Chetan Mohamed', registered: '2020/01/15', role: 'Admin', status: 'Inactive' },
  ];

  const columns = [
    { key: 'name', label: 'Name' },
    { key: 'registered', label: 'Registered' },
    { key: 'role', label: 'Role' },
    { key: 'status', label: 'Status' },
  ];

  return (
    <CDataTable
      items={data}
      fields={columns}
      columnFilter
      tableFilter
      itemsPerPageSelect
      itemsPerPage={5}
      pagination
    />
  );
};

export default BasicTable;
```

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

### Install CoreUI PRO for React (Yarn)

Source: https://coreui.io/react/docs/index

Installs the CoreUI PRO UI component library for React.js using Yarn. This is the premium version.

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

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

### React Popover Live Demo Example

Source: https://coreui.io/react/docs/components/popover

Demonstrates a basic live popover example in React using the CPopover component. It shows how to set a title and content, and trigger the popover with a button.

```javascript
import React from 'react'
import { CButton, CPopover } from '@coreui/react'


export const PopoverLiveExample = () => {
  return (
    <CPopover
      title="Popover title"
      content="And here’s some amazing content. It’s very engaging. Right?"
      placement="right"
    >
      <CButton color="danger" size="lg">
        Click to toggle popover
      </CButton>
    </CPopover>
  )
}
```

```typescript
import React from 'react'
import { CButton, CPopover } from '@coreui/react'


export const PopoverLiveExample = () => {
  return (
    <CPopover
      title="Popover title"
      content="And here’s some amazing content. It’s very engaging. Right?"
      placement="right"
    >
      <CButton color="danger" size="lg">
        Click to toggle popover
      </CButton>
    </CPopover>
  )
}
```

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

### Static React Modal Component Example

Source: https://coreui.io/react/docs/components/modal

A basic, static modal component example using CoreUI React. It includes a header, body, and footer with dismiss and save actions. This example shows the fundamental structure of a modal without dynamic state management.

```jsx
<CModal>
  <CModalHeader>
    <CModalTitle>React Modal title</CModalTitle>
  </CModalHeader>
  <CModalBody>
    <p>React Modal body text goes here.</p>
  </CModalBody>
  <CModalFooter>
    <CButton color="secondary">Close</CButton>
    <CButton color="primary">Save changes</CButton>
  </CModalFooter>
</CModal>
```

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

### Install CoreUI React Icons using npm

Source: https://coreui.io/react/docs/components/icon

Installs the CoreUI Icons and CoreUI Icons React packages using npm.

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

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

### React CFooter Example

Source: https://coreui.io/react/docs/components/footer

Basic example of the CFooter component in React, demonstrating its structure with nested links and text.

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

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

### Install CoreUI React Icons using Yarn

Source: https://coreui.io/react/docs/components/icon

Installs the CoreUI Icons and CoreUI Icons React packages using Yarn.

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

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

### React Toast with Live Example

Source: https://coreui.io/react/docs/components/toast

Shows how to implement a toast that can be sent dynamically, for example, by clicking a button. It uses React's `useState` and `useRef` hooks to manage the toast's visibility and an array of toasts. The example includes a button to trigger the toast and a `CToaster` component to display it.

```javascript
import React, { useRef, useState } from 'react'
import { CButton, CToast, CToastBody, CToaster, CToastHeader } from '@coreui/react'


export const ToastLiveExample = () => {
  const [toast, addToast] = useState()
  const toaster = useRef(null)
  const exampleToast = (
    <CToast>
      <CToastHeader closeButton>
        <svg
          className="rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
          role="img"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <div className="fw-bold me-auto">CoreUI for React.js</div>
        <small>7 min ago</small>
      </CToastHeader>
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
    </CToast>
  )
  return (
    <>
      <CButton color="primary" onClick={() => addToast(exampleToast)}>
        Send a toast
      </CButton>
      <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
    </>
  )
}




```

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

### Install @coreui/react-chartjs using npm

Source: https://coreui.io/react/docs/components/chart

Installs the @coreui/react-chartjs package using npm. This package is a React wrapper for Chart.js.

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

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

### React Autocomplete Basic Example with String Options

Source: https://coreui.io/react/docs/forms/autocomplete

Demonstrates a basic React Autocomplete implementation using a simple array of strings for options. This example highlights essential props for configuring the autocomplete's appearance and behavior.

```javascript
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'


export const AutocompleteBasicExample = () => {
  return (
    <CAutocomplete
      cleaner
      highlightOptionsOnSearch
      indicator
      label="Framework"
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Search technologies..."
      search="global"
      searchNoResultsLabel="No results found"
      showHints
      text="Start typing to search option or provide value"
      value="Bootstrap"
    />
  )
}
```

```typescript
import React from 'react'
import { CAutocomplete } from '@coreui/react-pro'


export const AutocompleteBasicExample = () => {
  return (
    <CAutocomplete
      cleaner
      highlightOptionsOnSearch
      indicator
      label="Framework"
      options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
      placeholder="Search technologies..."
      search="global"
      searchNoResultsLabel="No results found"
      showHints
      text="Start typing to search option or provide value"
      value="Bootstrap"
    />
  )
}
```

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

### CWidgetStatsB Example in React

Source: https://coreui.io/react/docs/components/widgets

Demonstrates the usage of the CWidgetStatsB component in React. It shows how to configure the widget with a title, value, helper text, and progress. The example includes variations with different colors and inverse styling, utilizing JavaScript and React.

```javascript
import React from 'react'
import { CCol, CRow, CWidgetStatsB } from '@coreui/react'


export const WidgetStatsBExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CWidgetStatsB
          className="mb-3"
          progress={{ color: 'success', value: 75 }}
          text="Widget helper text"
          title="Widget title"
          value="89.9%"
        />
      </CCol>
      <CCol xs={6}>
        <CWidgetStatsB
          className="mb-3"
          color="primary"
          inverse
          progress={{ value: 75 }}
          text="Widget helper text"
          title="Widget title"
          value="89.9%"
        />
      </CCol>
    </CRow>
  )
}
```

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

### React File Input Examples with CoreUI

Source: https://coreui.io/react/docs/forms/input/bootstrap

Provides examples of CoreUI's `CFormInput` for file uploads, demonstrating default, multiple file selection, disabled state, and small/large sizing options. Requires React and CoreUI.

```JavaScriptTypeScript
import React from 'react'
import { CFormInput } from '@coreui/react'


export const FormInputFileExample = () => {
  return (
    <>
      <div className="mb-3">
        <CFormInput type="file" id="formFile" label="Default file input example" />
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="formFileMultiple"
          label="Multiple files input example"
          multiple
        />
      </div>
      <div className="mb-3">
        <CFormInput
          type="file"
          id="formFileDisabled"
          label="Disabled file input example"
          disabled
        />
      </div>
      <div className="mb-3">
        <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
      </div>
      <div>
        <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
      </div>
    </>
  )
}
```

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

### CoreUI React: Between Breakpoints CSS Example

Source: https://coreui.io/react/docs/layout/breakpoints

Illustrates the CSS media query generated by the 'media-breakpoint-between' mixin. This example shows how to apply styles from the 'md' (medium) breakpoint up to the 'xl' (extra-large) breakpoint.

```css
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
```

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

### CoreUI React: Single Breakpoint CSS Example

Source: https://coreui.io/react/docs/layout/breakpoints

Provides the resulting CSS media query for the 'media-breakpoint-only' mixin. This example specifically shows the media query generated for the 'md' (medium) breakpoint.

```css
@media (min-width: 768px) and (max-width: 991.98px) { ... }
```

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

### React Placeholder Example with Card

Source: https://coreui.io/react/docs/components/placeholder

Demonstrates using CoreUI's CPlaceholder component to create a loading state for a card component, mimicking the structure and size of a regular card but with placeholder elements. Includes both JavaScript and TypeScript examples.

```javascript
import React from 'react'
import { withPrefix } from 'gatsby'
import {
  CButton,
  CCard,
  CCardBody,
  CCardImage,
  CCardText,
  CCardTitle,
  CPlaceholder,
} from '@coreui/react'


export const PlaceholderExample = () => {
  return (
    <>
      <CCard style={{ width: '18rem' }}>
        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard style={{ width: '18rem' }}>
        <CCardImage
          as="svg"
          orientation="top"
          width="100%"
          height="162"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
        </CCardImage>
        <CCardBody>
          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
            <CPlaceholder xs={6} />
          </CPlaceholder>
          <CPlaceholder as={CCardText} animation="glow">
            <CPlaceholder xs={7} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={6} />
            <CPlaceholder xs={8} />
          </CPlaceholder>
          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
        </CCardBody>
      </CCard>
    </>
  )
}

```

```typescript
import React from 'react'
import { withPrefix } from 'gatsby'
import {
  CButton,
  CCard,
  CCardBody,
  CCardImage,
  CCardText,
  CCardTitle,
  CPlaceholder,
} from '@coreui/react'


export const PlaceholderExample = () => {
  return (
    <>
      <CCard style={{ width: '18rem' }}>
        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard style={{ width: '18rem' }}>
        <CCardImage
          as="svg"
          orientation="top"
          width="100%"
          height="162"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
        </CCardImage>
        <CCardBody>
          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
            <CPlaceholder xs={6} />
          </CPlaceholder>
          <CPlaceholder as={CCardText} animation="glow">
            <CPlaceholder xs={7} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={6} />
            <CPlaceholder xs={8} />
          </CPlaceholder>
          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
        </CCardBody>
      </CCard>
    </>
  )
}

```

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

### React List Group with Links Example

Source: https://coreui.io/react/docs/components/list-group

Demonstrates creating actionable list group items using anchor (`<a>`) tags with the `as="a"` prop. It includes examples of active and disabled link items.

```javascript
import React from 'react'
import { CListGroup, CListGroupItem } from '@coreui/react'


export const ListGroupLinksAndButtonsExample = () => {
  return (
    <CListGroup>
      <CListGroupItem as="a" href="#" active>Cras justo odio</CListGroupItem>
      <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
      <CListGroupItem as="a" href="#">Morbi leo risus</CListGroupItem>
      <CListGroupItem as="a" href="#">Porta ac consectetur ac</CListGroupItem>
      <CListGroupItem as="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
    </CListGroup>
  )
}
```

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

### React Default Sidebar Component Example

Source: https://coreui.io/react/docs/components/sidebar

This example demonstrates a default CoreUI React Sidebar component. It includes a header, brand, navigation items (with badges and dropdowns), and a footer with a toggler. Dependencies include '@coreui/react' and '@coreui/icons-react'.

```javascript
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CSidebarToggler,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'


import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'


export const SidebarExample = () => {
  return (
    <CSidebar className="border-end">
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand>CoreUI</CSidebarBrand>
      </CSidebarHeader>
      <CSidebarNav>
        <CNavTitle>Nav Title</CNavTitle>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
        </CNavItem>
        <CNavItem href="#">
          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge 
          <CBadge color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
            </>
          }
        >
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span> 
            Nav dropdown item
          </CNavItem>
          <CNavItem href="#">
            <span className="nav-icon">
              <span className="nav-icon-bullet"></span>
            </span> 
            Nav dropdown item
          </CNavItem>
        </CNavGroup>
        <CNavItem href="https://coreui.io">
          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
        </CNavItem>
        <CNavItem href="https://coreui.io/pro/">
          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO
        </CNavItem>
      </CSidebarNav>
      <CSidebarHeader className="border-top">
        <CSidebarToggler />
      </CSidebarHeader>
    </CSidebar>
  )
}
```

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

### React Offcanvas - Bottom Placement Example

Source: https://coreui.io/react/docs/components/offcanvas/bootstrap

Provides an example of a bottom-positioned offcanvas component built with CoreUI for React. It covers the necessary imports, state management, and component structure for a functional offcanvas.

```javascript
import React, { useState } from 'react'
import {
  CButton,
  CCloseButton,
  COffcanvas,
  COffcanvasBody,
  COffcanvasHeader,
  COffcanvasTitle,
} from '@coreui/react'


export const OffcanvasPlacementBottomExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisible(true)}>
        Toggle bottom offcanvas
      </CButton>
      <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
        <COffcanvasHeader>
          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
        </COffcanvasHeader>
        <COffcanvasBody>
          Content for the offcanvas goes here. You can place just about any React component or custom elements
          here.
        </COffcanvasBody>
      </COffcanvas>
    </>
  )
}
```

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

### CWidgetStatsC Example in React

Source: https://coreui.io/react/docs/components/widgets

Illustrates the implementation of the CWidgetStatsC component in React applications. This example showcases how to integrate the component with icons (using CIcon and cilChartPie) and configure its title, value, progress, and color. It covers both standard and inverse color schemes, written in JavaScript and React.

```javascript
import React from 'react'
import CIcon from '@coreui/icons-react'
import { cilChartPie } from '@coreui/icons'
import { CCol, CRow, CWidgetStatsC } from '@coreui/react'


export const WidgetStatsCExample = () => {
  return (
    <CRow>
      <CCol xs={6}>
        <CWidgetStatsC
          className="mb-3"
          icon={<CIcon icon={cilChartPie} height={36} />}
          progress={{ color: 'success', value: 75 }}
          title="Widget title"
          value="89.9%"
        />
      </CCol>
      <CCol xs={6}>
        <CWidgetStatsC
          className="mb-3"
          icon={<CIcon icon={cilChartPie} height={36} />}
          color="primary"
          inverse
          progress={{ value: 75 }}
          title="Widget title"
          value="89.9%"
        />
      </CCol>
    </CRow>
  )
}
```

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

### React Bootstrap Navbar with Basic Usage Example

Source: https://coreui.io/react/docs/components/navbar/bootstrap

Demonstrates the basic structure and functionality of the React Bootstrap Navbar component. It includes navigation links, a dropdown, a search form, and a toggle for collapsible content. This example requires React and CoreUI for React.js.

```javascript
import React, { useState } from 'react'
import {
  CButton,
  CCollapse,
  CContainer,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CForm,
  CFormInput,
  CNavbar,
  CNavbarBrand,
  CNavbarNav,
  CNavbarToggler,
  CNavItem,
  CNavLink,
} from '@coreui/react'


export const NavbarExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <CNavbar expand="lg" className="bg-body-tertiary">
      <CContainer fluid>
        <CNavbarBrand href="#">Navbar</CNavbarBrand>
        <CNavbarToggler onClick={() => setVisible(!visible)} />
        <CCollapse className="navbar-collapse" visible={visible}>
          <CNavbarNav className="me-auto">
            <CNavItem>
              <CNavLink href="#" active>
                Home
              </CNavLink>
            </CNavItem>
            <CNavItem>
              <CNavLink href="#">Link</CNavLink>
            </CNavItem>
            <CDropdown variant="nav-item" popper={false}>
              <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>
          </CNavbarNav>
          <CForm className="d-flex">
            <CFormInput type="search" className="me-2" placeholder="Search" />
            <CButton type="submit" color="success" variant="outline">
              Search
            </CButton>
          </CForm>
        </CCollapse>
      </CContainer>
    </CNavbar>
  )
}
```

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

### Dropdown Responsive Alignment 2 Example

Source: https://coreui.io/react/docs/components/dropdown/bootstrap

Shows how to left-align a dropdown menu from a breakpoint using the 'md:start' alignment prop. This example utilizes CoreUI React components and is suitable for JavaScript/TypeScript.

```javascript
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'


export const DropdownResponsiveAlignment2Example = () => {
  return (
    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
      <CDropdownToggle color="secondary">
        Right-aligned but left aligned when large screen
      </CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}



```

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

### Dropdown Responsive Alignment

Source: https://coreui.io/react/docs/components/dropdown/bootstrap

Examples of how to create responsive dropdown menus that align to the start or end based on screen size breakpoints.

```APIDOC
## CDropdown

### Description

Allows for responsive alignment of dropdown menus. You can align the menu to the end (right) or start (left) of the dropdown toggle, and specify breakpoints for these alignments.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Props for `CDropdown` component:

- **`alignment`** (string | object) - Required/Optional - Defines the alignment of the dropdown menu. Can be a simple string like `'end'` or `'start'`, or an object mapping breakpoints to alignment values (e.g., `{ xs: 'end', lg: 'start' }`).

### Request Example

```javascript
<CDropdown alignment="end">
  <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>
```

```javascript
<CDropdown alignment={{ xs: 'end', lg: 'start' }}>
  <CDropdownToggle color="secondary">
    Right-aligned but left aligned when large screen
  </CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>
```

### Response

N/A (Component Usage)

#### Success Response (200)

N/A (Component Usage)

#### Response Example

N/A (Component Usage)
```

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

### React: List Group with Checkboxes

Source: https://coreui.io/react/docs/components/list-group

Example of creating a list group in React using CoreUI components, where each list item contains a checkbox. This setup is useful for selection lists.

```javascript
import React from 'react'
import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'


export const ListGroupCheckboxesAndRadiosExample = () => {
  return (
    <CListGroup>
      <CListGroupItem>
        <CFormCheck label="Cras justo odio" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Morbi leo risus" defaultChecked />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="orta ac consectetur ac" />
      </CListGroupItem>
      <CListGroupItem>
        <CFormCheck label="Vestibulum at eros" />
      </CListGroupItem>
    </CListGroup>
  )
}
```

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

### Date Range Picker Month Selection - JavaScript/TypeScript

Source: https://coreui.io/react/docs/forms/date-range-picker

Enables month range selection by setting the `selectionType` property to `month`. Includes examples with and without pre-defined start and end dates.

```JavaScript
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangePicker } from '@coreui/react-pro'


export const DateRangePickerMonthsExample = () => {
  return (
    <CRow>
      <CCol className="mb-3 mb-sm-0" sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="month"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />{' '}
      </CCol>
      <CCol sm={6}>
        <CDateRangePicker
          label="Date range"
          locale="en-US"
          selectionType="month"
          startDate="2022-08"
          endDate="2023-05"
          onStartDateChange={(date) => console.log(date)}
          onEndDateChange={(date) => console.log(date)}
        />{' '}
      </CCol>
    </CRow>
  )
}
```

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

### Responsive Grid Classes (All Breakpoints)

Source: https://coreui.io/react/docs/layout/grid

Shows how to use CoreUI's grid system with all breakpoints, from extra-small to extra-large. The example demonstrates a row with equally sized columns and another row where columns have specific widths defined by `xs` props.

```jsx
<CContainer>
  <CRow>
    <CCol>col</CCol>
    <CCol>col</CCol>
    <CCol>col</CCol>
    <CCol>col</CCol>
  </CRow>
  <CRow>
    <CCol xs={8}>col-8</CCol>
    <CCol xs={4}>col-4</CCol>
  </CRow>
</CContainer>
```

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

### Linear React Stepper Example

Source: https://coreui.io/react/docs/forms/stepper

Demonstrates a linear React Stepper where users must complete steps sequentially. The `linear` prop is set to `true` (default behavior) to enforce this guided flow, ideal for checkout processes or registration wizards.

```javascript
import React from 'react'
import { CStepper } from '@coreui/react-pro'


export const StepperLinearExample = () => {
  return <CStepper steps={['Step 1', 'Step 2', 'Step 3']} />
}
```

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

### Build Production Files (npm or yarn)

Source: https://coreui.io/react/docs/templates/installation

Creates the `dist/` directory containing compiled files for production deployment. This process utilizes Sass and Autoprefixer for optimal CSS output.

```bash
npm run build
```

```bash
yarn build
```

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

### Responsive Alignment for Dropdown Menu (React)

Source: https://coreui.io/react/docs/components/dropdown

Shows how to implement responsive alignment for dropdown menus in CoreUI React, allowing alignment changes based on screen breakpoints. This example aligns the menu to the end for small screens and left for larger screens using `alignment={{ xs: 'end', lg: 'start' }}`.

```javascript
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
} from '@coreui/react'


export const DropdownResponsiveAlignment2Example = () => {
  return (
    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
      <CDropdownToggle color="secondary">
        Right-aligned but left aligned when large screen
      </CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  )
}
```

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

### Sass: Import specific CoreUI parts using @import

Source: https://coreui.io/react/docs/customize/sass

This example details importing specific CoreUI Sass files using the deprecated `@import` rule. It outlines the recommended order of imports, starting with functions and variables, and then including various components and utilities. This approach allows for granular control over which parts of CoreUI are included in your project.

```sass
// Custom.scss
// Option B: Include parts of CoreUI


// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/@coreui/coreui/scss/functions";


// 2. Include any default variable overrides here


// 3. Include remainder of required CoreUI stylesheets
@import "../node_modules/@coreui/coreui/scss/variables";


// 4. Include any default map overrides here


// 5. Include remainder of required parts
@import "../node_modules/@coreui/coreui/scss/maps";
@import "../node_modules/@coreui/coreui/scss/mixins";
@import "../node_modules/@coreui/coreui/scss/root";


// 6. Optionally include any other parts as needed
@import "../node_modules/@coreui/coreui/scss/utilities";
@import "../node_modules/@coreui/coreui/scss/reboot";
@import "../node_modules/@coreui/coreui/scss/type";
@import "../node_modules/@coreui/coreui/scss/images";
@import "../node_modules/@coreui/coreui/scss/containers";
@import "../node_modules/@coreui/coreui/scss/grid";
@import "../node_modules/@coreui/coreui/scss/helpers";


// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/@coreui/coreui/scss/utilities/api";


// 8. Add additional custom code here

```

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

### Import CoreUI React Component

Source: https://coreui.io/react/docs/getting-started/introduction

Demonstrates how to import a CoreUI component for React.js into your project.

```javascript
import { CAlert } from '@coreui/react';
```

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

### Callback for Start Date Change in React Calendar

Source: https://coreui.io/react/docs/components/calendar/api

Fired when the start date in a date range selection is updated. This callback is valuable for updating application states or triggering side effects based on the selected start date, including an optional formatted date.

```typescript
onStartDateChange: (date: string | Date, formatedDate?: string) => void;
```

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

### Install @coreui/react-chartjs using Yarn

Source: https://coreui.io/react/docs/components/chart

Installs the @coreui/react-chartjs package using Yarn. This package is a React wrapper for Chart.js.

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

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

### Import CoreUI PRO React Component

Source: https://coreui.io/react/docs/getting-started/introduction

Demonstrates how to import a CoreUI PRO component for React.js into your project.

```javascript
import { CAlert } from '@coreui/react-pro';
```

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

### Run Tests (npm or yarn)

Source: https://coreui.io/react/docs/templates/installation

Executes the test suite for the CoreUI React Admin Template locally. This helps ensure the code functions as expected.

```bash
npm test
```

```bash
yarn test
```

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

### React Smart Pagination Basic Example

Source: https://coreui.io/react/docs/components/smart-pagination

Demonstrates the basic usage of the CSmartPagination component in React. It shows how to set the active page and the total number of pages, and handle page changes.

```javascript
import React, { useState } from 'react'
import { CSmartPagination } from '@coreui/react-pro'


export const SmartPaginationExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  return (
    <CSmartPagination activePage={currentPage} pages={10} onActivePageChange={setCurrentPage} />
  )
}

```

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

### React Loading Button Examples

Source: https://coreui.io/react/docs/components/loading-button

Demonstrates basic usage of the CLoadingButton component with different color and variant options.

```APIDOC
## CLoadingButton Component Usage

### Description
Examples of creating basic React Loading Buttons with primary, outline, and ghost styles.

### Example Usage
```javascript
<CLoadingButton color="primary" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="primary" variant="outline" timeout={2000}>Submit</CLoadingButton>
<CLoadingButton color="primary" variant="ghost" timeout={2000}>Submit</CLoadingButton>
```
```

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

### React Header Basic Usage Example

Source: https://coreui.io/react/docs/components/header

Demonstrates the basic implementation of a responsive CoreUI React Header component. It includes navigation links, a dropdown, and a search form, utilizing various sub-components like CHeaderBrand, CHeaderNav, CCollapse, and CForm.

```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>
  </>
)
```

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

### Install react-imask (yarn)

Source: https://coreui.io/react/docs/forms/input-mask

Installs the react-imask library using yarn, a prerequisite for extending CoreUI React components with input masking.

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

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

### Install react-imask (npm)

Source: https://coreui.io/react/docs/forms/input-mask

Installs the react-imask library using npm, which is required to add input masking functionality to React components.

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

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

### Mix and Match Responsive Classes

Source: https://coreui.io/react/docs/layout/grid

Provides an example of combining different responsive classes across various breakpoints (`md`, `xs`) to create complex layouts. This showcases flexibility in defining column behavior at different screen sizes.

```jsx
<CContainer>
  <CRow>
    <CCol md={8}>.col-md-8</CCol>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
  </CRow>
  <CRow>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
    <CCol xs={6} md={4}>
      .col-6 .col-md-4
    </CCol>
  </CRow>
  <CRow>
    <CCol xs={6}>.col-6</CCol>
    <CCol xs={6}>.col-6</CCol>
  </CRow>
</CContainer>
```

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

### React Callout Component Examples

Source: https://coreui.io/react/docs/components/callout

Demonstrates the usage of the React Callout component with various color props for different contextual styles. Requires the '@coreui/react' library.

```javascript
import React from 'react'
import { CCallout } from '@coreui/react'


export const CalloutExample = () => {
  return (
    <>
      <CCallout color="primary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="secondary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="success">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="danger">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="warning">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="info">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="light">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
      <CCallout color="dark">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
        guidelines, and code snippets.
      </CCallout>
    </>
  )
}
```

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

### Clone CoreUI Free React Admin Template Repository

Source: https://coreui.io/react/docs/templates/download

This command clones the CoreUI Free React Admin Template from GitHub. It requires Git to be installed and configured on your system. The cloned repository provides the source code for building React applications.

```git
git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project
```