Metronic React

https://preview.keenthemes.com/metronic8/react/docs/
Admin
Metronic React is a comprehensive admin dashboard template built with React and Vite, featuring...
Tokens:55,103
Snippets:199
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Navigate to Project Directory

Source: https://preview.keenthemes.com/metronic8/react/docs/index

Changes the current directory to the specified React demo path. This is the first step before installing dependencies.

```bash
cd [unpacked path]/react/[demo]
```

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

### Install Project Dependencies

Source: https://preview.keenthemes.com/metronic8/react/docs/index

Installs local project dependencies required for the React application. Dependencies are listed in package.json and installed into the node_modules folder.

```bash
npm install
# OR
yarn install
```

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

### Start Development Server

Source: https://preview.keenthemes.com/metronic8/react/docs/index

Launches the development server, which watches for file changes and rebuilds the application automatically. The app can then be accessed at http://localhost:5173/.

```bash
npm run dev
# OR
yarn dev
```

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

### Basic React-Select Examples

Source: https://preview.keenthemes.com/metronic8/react/docs/react-select

Provides basic examples of the React-Select component with different background styles (default, transparent, solid). It includes defining options and rendering the Select component with a placeholder.

```javascript
import { FC } from "react";
import Select from 'react-select'


const Example1: FC = () => {
    const options = [
        { value: 'option 1', label: 'Option 1' },
        { value: 'option 2', label: 'Option 2' },
        { value: 'option 3', label: 'Option 3' },
        { value: 'option 4', label: 'Option 4' },
        { value: 'option 5', label: 'Option 5' },
    ]


    return (
        <>
            <div className='mb-10'>
                <label className='form-label'>Default input style</label>
                <Select 
                    className='react-select-styled' 
                    classNamePrefix='react-select' 
                    options={options} 
                    placeholder='Select an option' 
                />
            </div>


            <div className='mb-10'>
                <label className='form-label'>Transparent background style</label>
                <Select 
                    className='react-select-styled react-select-transparent' 
                    classNamePrefix='react-select' 
                    options={options} 
                    placeholder='Select an option'
                />
            </div>


            <div className='mb-10'>
                <label className='form-label'>Solid background style</label>
                <Select 
                    className='react-select-styled react-select-solid' 
                    classNamePrefix='react-select' 
                    options={options} 
                    placeholder='Select an option' 
                />
            </div>
        </>
    )
}


export { Example1 };
```

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

### Symbol Component Sizing Examples

Source: https://preview.keenthemes.com/metronic8/react/docs/symbol

This snippet provides examples of various sizes for the Symbol component. Sizes are controlled by classes like `symbol-{size}` (e.g., `symbol-50px`) and responsive variants like `symbol-{breakpoint}-{size}`. The examples show different pixel dimensions applied to the symbol.

```jsx
<div className="symbol symbol-30px me-10 mb-10">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div className="symbol symbol-50px me-10 mb-10">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div className="symbol symbol-75px me-10 mb-10">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div className="symbol symbol-100px me-10 mb-10">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div className="symbol symbol-125px me-10 mb-10">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div className="symbol symbol-150px me-10 mb-10">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>
```

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

### Install React Dependencies

Source: https://preview.keenthemes.com/metronic8/react/docs/rtl

Installs necessary React dependencies and extra webpack plugins required for RTL CSS generation. This command should be run after navigating to the specific demo folder within the Metronic React project.

```bash
npm install
```

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

### React Modal Example with Flatpickr

Source: https://preview.keenthemes.com/metronic8/react/docs/flatpickr

This example demonstrates integrating the Flatpickr datepicker within a Bootstrap modal. It includes instructions on how to use `data-bs-focus="false"` to prevent focus issues when the modal initializes. The code shows a button to launch the modal, which contains the Flatpickr component.

```typescript
const Example8: FC = () => {
  const [dateState, setDateState] = useState<any>({
    date: new Date()
  });

  return <>
    <div className='py-5'>
      <div className='rounded border p-10'>
        <button
          type='button'
          className='btn btn-primary'
          data-bs-toggle='modal'
          data-bs-target='#kt_modal_1'
        >
          Launch demo modal
        </button>


        <div className='modal fade' tabIndex={-1} id='kt_modal_1'>
          <div className='modal-dialog'>
            <div className='modal-content'>
              <div className='modal-header'>
                <h5 className='modal-title'>Modal title</h5>
                <div
                  className='btn btn-icon btn-sm btn-active-light-primary ms-2'
                  data-bs-dismiss='modal'
                  aria-label='Close'
                >
                  <KTSVG
                    path='media/icons/duotune/arrows/arr061.svg'
                    className='svg-icon svg-icon-2x'
                  />
                </div>
              </div>


              <div className='modal-body'>
                <p>Select date</p>
                <Flatpickr
                  value={dateState.date}
                  onChange={([date]) => {
                    setDateState({ date });
                  }}
                  className='form-control form-control-solid'
                  placeholder='Pick date'
                />
              </div>


              <div className='modal-footer'>
                <button type='button' className='btn btn-light' data-bs-dismiss='modal'>
                  Close
                </button>
                <button type='button' className='btn btn-primary'>
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </>
}
```

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

### Navigate to Demo Folder

Source: https://preview.keenthemes.com/metronic8/react/docs/rtl

Command to change the current directory to the specific Metronic React demo folder (e.g., `demo1`). This is typically the first step before running installation or build commands.

```bash
cd theme/react/demo1
```

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

### Generate RTL CSS with Webpack

Source: https://preview.keenthemes.com/metronic8/react/docs/rtl

Executes an npm script command to run webpack, which will generate the RTL version of the CSS files. This script is part of the RTL setup process.

```bash
npm run rtl
```

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

### Disabled React-Select Examples

Source: https://preview.keenthemes.com/metronic8/react/docs/react-select

Demonstrates disabled state examples for the React-Select component with default, transparent, and solid background styles. The `isDisabled` prop is used to disable user interaction.

```javascript
import { FC } from "react";
import Select from 'react-select'


const Example2: FC = () => {
    const options = [
        { value: 'option 1', label: 'Option 1' },
        { value: 'option 2', label: 'Option 2' },
        { value: 'option 3', label: 'Option 3' },
        { value: 'option 4', label: 'Option 4' },
        { value: 'option 5', label: 'Option 5' },
    ]


    return (
        <>
            <div className='mb-10'>
                <label className='form-label'>Default input style</label>
                <Select 
                    className='react-select-styled' 
                    classNamePrefix='react-select' 
                    options={options} 
                    placeholder='Select an option' 
                    isDisabled 
                />
            </div>


            <div className='mb-10'>
                <label className='form-label'>Transparent background style</label>
                <Select 
                    className='react-select-styled react-select-transparent' 
                    classNamePrefix='react-select' 
                    options={options} 
                    placeholder='Select an option' 
                    isDisabled 
                />
            </div>


            <div className='mb-10'>
                <label className='form-label'>Solid background style</label>
                <Select 
                    className='react-select-styled react-select-solid' 
                    classNamePrefix='react-select' 
                    options={options} 
                    placeholder='Select an option' 
                    isDisabled 
                />
            </div>
        </>
    )
}


export { Example2 };
```

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

### Basic Breadcrumb Example (React)

Source: https://preview.keenthemes.com/metronic8/react/docs/breadcrumb

Demonstrates a basic breadcrumb structure using an ordered list with linked list items. This example assumes a React environment and utilizes Bootstrap classes for styling.

```jsx
<ol className="breadcrumb text-muted fs-6 fw-bold">
  <li className="breadcrumb-item pe-3">
    <a href="#" className="pe-3">
      Home
    </a>
  </li>
  <li className="breadcrumb-item pe-3">
    <a href="#" className="pe-3">
      Library
    </a>
  </li>
  <li className="breadcrumb-item px-3 text-muted">Active</li>
</ol>
```

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

### Basic Flatpickr Examples in React

Source: https://preview.keenthemes.com/metronic8/react/docs/flatpickr

Demonstrates basic usage of the Flatpickr component in React with default and solid background input styles. It utilizes the `useState` hook to manage the selected date and includes placeholders for user interaction.

```javascript
const Example1: FC = () => {
  const [dateState, setDateState] = useState<any>({
    date1: new Date(),
    date2: new Date()
  });


  return (
    <>
      <Flatpickr
        value={dateState.date}
        onChange={([date1]) => {
          setDateState({ date1 });
        }}
        className='form-control'
        placeholder='Pick date'
      />


      <Flatpickr
        value={dateState.date}
        onChange={([date2]) => {
          setDateState({ date2 });
        }}
        className='form-control form-control-solid'
        placeholder='Pick date'
      />
    </>
  )
}
```

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

### Apply Opacity Active State Classes in HTML

Source: https://preview.keenthemes.com/metronic8/react/docs/helpers/opacity

These HTML examples showcase the application of opacity classes for active states. Clicking on these elements will trigger a change in their opacity, providing visual cues for user interaction.

```html
<div class="opacity-active-0"></div>
<div class="opacity-active-5"></div>
<div class="opacity-active-10"></div>
<div class="opacity-active-15"></div>
<div class="opacity-active-20"></div>
<div class="opacity-active-25"></div>
<div class="opacity-active-50"></div>
<div class="opacity-active-75"></div>
<div class="opacity-active-100"></div>
```

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

### Basic Bootstrap Modal Example in React

Source: https://preview.keenthemes.com/metronic8/react/docs/modal

This snippet demonstrates how to implement a basic Bootstrap Modal in a React application using Metronic's components. It includes the button to trigger the modal and the modal's HTML structure with header, body, and footer.

```jsx
<button type="button"
  className="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#kt_modal_1"
>
  Launch demo modal
</button>
<div className="modal fade" tabIndex={-1} id="kt_modal_1">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title">Modal title</h5>
        <div
          className="btn btn-icon btn-sm btn-active-light-primary ms-2"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <KTSVG
            path="media/icons/duotune/arrows/arr061.svg"
            className="svg-icon svg-icon-2x"
          />
        </div>
      </div>
      <div className="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div className="modal-footer">
        <button
          type="button"
          className="btn btn-light"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" className="btn btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>
```

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

### Basic Alert Example in React

Source: https://preview.keenthemes.com/metronic8/react/docs/alerts

Demonstrates a basic alert component in React using Metronic's styling. It includes an icon and text content, utilizing primary alert coloring. This component is suitable for general informational messages.

```jsx
<div className="alert alert-primary d-flex align-items-center p-5 mb-10">
  <span className="svg-icon svg-icon-2hx svg-icon-primary me-3">...</span>
  
  <div className="d-flex flex-column">
    <h5 className="mb-1">This is an alert</h5>
    <span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
  </div>
</div>
```

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

### React Flushed Button Example

Source: https://preview.keenthemes.com/metronic8/react/docs/buttons

Illustrates a 'flushed' button using the `.btn-flush` class, which removes paddings, borders, background, and rounded corners for a minimalist appearance.

```JSX
<a href="#" className="btn btn-flush">Flushed button</a>
```

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

### Enable Multi-Selection in React-Select

Source: https://preview.keenthemes.com/metronic8/react/docs/react-select

This example demonstrates how to enable multi-selection in a React-Select component using the `isMulti` attribute. It shows variations for small, default, and large sizes, allowing users to select multiple options and display them as tags. It takes an array of options and a placeholder.

```jsx
import { FC } from "react";
import Select from 'react-select'


const Example9: FC = () => {
    const options = [
        { value: 'option 1', label: 'Option 1' },
        { value: 'option 2', label: 'Option 2' },
        { value: 'option 3', label: 'Option 3' },
        { value: 'option 4', label: 'Option 4' },
        { value: 'option 5', label: 'Option 5' },
    ]
    return (
        <>
            <div className='mb-10'>
                <label className='form-label'>Small size</label>
                <Select 
                    className='react-select-styled react-select-solid react-select-sm'
                    classNamePrefix='react-select'
                    options={options}
                    placeholder='Select an option'
                    isMulti
                />
            </div>


            <div className='mb-10'>
                <label className='form-label'>Default size</label>
                <Select 
                    className='react-select-styled react-select-solid'
                    classNamePrefix='react-select'
                    options={options}
                    placeholder='Select an option'
                    isMulti
                />
            </div>


            <div className='mb-10'>
                <label className='form-label'>Large size</label>
                <Select 
                    className='react-select-styled react-select-solid react-select-lg'
                    classNamePrefix='react-select'
                    options={options}
                    placeholder='Select an option'
                    isMulti
                />
            </div>
        </>
    )
}


export { Example9 };

```

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

### Fullscreen Bootstrap Modal Example in React

Source: https://preview.keenthemes.com/metronic8/react/docs/modal

This snippet shows how to create a fullscreen Bootstrap Modal in React using Metronic. It utilizes the `.modal-fullscreen` class for the fullscreen effect and applies `.bg-white` and `.shadow-none` for styling long, scrollable content.

```jsx
<button type="button"
  className="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#kt_modal_2"
>
  Launch demo modal
</button>
<div className="modal bg-white fade" tabIndex={-1} id="kt_modal_2">
  <div className="modal-dialog modal-fullscreen">
    <div className="modal-content shadow-none">
      <div className="modal-header">
        <h5 className="modal-title">Modal title</h5>
        <div
          className="btn btn-icon btn-sm btn-active-light-primary ms-2"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <KTSVG
            path="media/icons/duotune/arrows/arr061.svg"
            className="svg-icon svg-icon-2x"
          />
        </div>
      </div>
      <div className="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div className="modal-footer">
        <button
          type="button"
          className="btn btn-light"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" className="btn btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>
```

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

### React: Display Basic Star Rating with Duotune Icons

Source: https://preview.keenthemes.com/metronic8/react/docs/rating

Demonstrates how to render a basic star-based rating component in React using Duotune SVG icons. This example shows how to apply the 'checked' class to indicate a filled star.

```jsx
<div className="rounded border p-10">
  <div className="rating">
    <div className="rating-label checked">
      <KTSVG
        path="media/icons/duotune/general/gen029.svg"
        className="svg-icon svg-icon-1"
      />
    </div>
    <div className="rating-label checked">
      <KTSVG
        path="media/icons/duotune/general/gen029.svg"
        className="svg-icon svg-icon-1"
      />
    </div>
    <div className="rating-label checked">
      <KTSVG
        path="media/icons/duotune/general/gen029.svg"
        className="svg-icon svg-icon-1"
      />
    </div>
    <div className="rating-label checked">
      <KTSVG
        path="media/icons/duotune/general/gen029.svg"
        className="svg-icon svg-icon-1"
      />
    </div>
    <div className="rating-label checked">
      <KTSVG
        path="media/icons/duotune/general/gen029.svg"
        className="svg-icon svg-icon-1"
      />
    </div>
  </div>
</div>
```

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

### Apply Circle Style to Symbol

Source: https://preview.keenthemes.com/metronic8/react/docs/symbol

This example shows how to apply a circular style to the Symbol component using the `symbol-circle` class. It also demonstrates setting the background image using inline styles and the `toAbsoluteUrl` function.

```jsx
<div className="symbol symbol-50px symbol-circle me-10 mb-10">
  <div className="symbol-label"
    style={{
      backgroundImage: `url('${toAbsoluteUrl(
        "media/avatars/300-6.jpg"
      )}')`,
    }}>
  </div>
</div>
```

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

### Group Select Options with React-Select

Source: https://preview.keenthemes.com/metronic8/react/docs/react-select

This example shows how to group options in a react-select dropdown. It utilizes the 'options' property within each group object to define the selectable choices. The component requires 'react-select' for functionality and renders a select input with predefined option groups.

```javascript
import { FC } from "react";
import Select from 'react-select'


const Example3: FC = () => {
    const groupedOptions = [
        {
            label: 'Group 1',
            options: [
                { value: 'option 1 - group 1', label: 'Option 1' },
                { value: 'option 2 - group 1', label: 'Option 2' },
                { value: 'option 3 - group 1', label: 'Option 3' },
                { value: 'option 4 - group 1', label: 'Option 4' },
                { value: 'option 5 - group 1', label: 'Option 5' },
            ]
        },
        {
            label: 'Group 2',
            options: [
                { value: 'option 1 - group 2', label: 'Option 1' },
                { value: 'option 2 - group 2', label: 'Option 2' },
                { value: 'option 3 - group 2', label: 'Option 3' },
                { value: 'option 4 - group 2', label: 'Option 4' },
                { value: 'option 5 - group 2', label: 'Option 5' },
            ]
        }
    ]


    return (
        <div className='mb-10'>
            <label className='form-label'>Option Groups</label>
            <Select 
                className='react-select-styled'
                classNamePrefix='react-select'
                options={groupedOptions} 
                placeholder='Select an option'
            />
        </div>
    )
}


export { Example3 };
```

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

### React Base Button Styles

Source: https://preview.keenthemes.com/metronic8/react/docs/buttons

Demonstrates how to apply base button styles using the `.btn-{color}` class, which are defined by Metronic's SASS variables `$theme-colors`. These examples show different color options for anchor tag buttons.

```jsx
<a href="#" className="btn btn-white">White</a>
<a href="#" className="btn btn-primary">Primary</a>
<a href="#" className="btn btn-light">Light</a>
<a href="#" className="btn btn-secondary">Secondary</a>
<a href="#" className="btn btn-success">Success</a>
<a href="#" className="btn btn-info">Info</a>
<a href="#" className="btn btn-warning">Warning</a>
<a href="#" className="btn btn-danger">Danger</a>
<a href="#" className="btn btn-dark">Dark</a>
```

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

### Display Text Labels with Symbol

Source: https://preview.keenthemes.com/metronic8/react/docs/symbol

This example showcases how to use the Symbol component to display text-based labels. It involves styling the `.symbol-label` element with utility classes for font size, weight, color, and background. Multiple variations demonstrate different text and background color combinations.

```jsx
<div className="symbol symbol-50px">
  <div className="symbol-label fs-2 fw-bold text-success">A</div>
</div>


<div className="symbol symbol-50px">
  <div className="symbol-label fs-2 fw-bold bg-danger text-inverse-danger">L</div>
</div>


<div className="symbol symbol-50px">
  <div className="symbol-label fs-2 fw-bold text-danger">C</div>
</div>


<div className="symbol symbol-50px">
  <div className="symbol-label fs-2 fw-bold bg-primary text-inverse-primary">T</div>
</div>


<div className="symbol symbol-50px">
  <div className="symbol-label fs-2 fw-bold text-warning">X</div>
</div>


<div className="symbol symbol-50px">
  <div className="symbol-label fs-2 fw-bold bg-info text-inverse-info">S</div>
</div>
```

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

### Toggling Indicator State with JavaScript (React)

Source: https://preview.keenthemes.com/metronic8/react/docs/indicator

Provides a React code example for dynamically toggling the Indicator component's state using the 'useRef' hook and JavaScript. It illustrates how to attach an event listener to a button and use 'setTimeout' to simulate a progress indication that automatically deactivates after a few seconds.

```javascript
// import {useRef} from 'react';
// in your function add rows =>
const btnRef = useRef<HTMLButtonElement | null>(null);
const onClick = () => {
  // Disable indicator after 3 seconds
  btnRef.current?.setAttribute('data-kt-indicator', 'on');
  setTimeout(() => {
    // Activate indicator
    btnRef.current?.removeAttribute("data-kt-indicator");
  }, 3000);
};
// in your HTML add
<button ref={btnRef} onClick={onClick} type="button" className="btn btn-primary me-10" id="kt_button_1">
  <span className="indicator-label">Submit</span>
  <span className="indicator-progress">Please wait... 
  <span className="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
```

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

### Configure React Router for Custom Page

Source: https://preview.keenthemes.com/metronic8/react/docs/create-a-page

This code demonstrates how to update the React Router configuration to include a new route for the custom page. It involves importing the page component and adding a new Route element within the existing Routes structure. Ensure `react-router-dom` is installed and configured.

```tsx
import {lazy, FC, Suspense} from 'react'
import {Route, Routes, Navigate} from 'react-router-dom'
import {MasterLayout} from '../../_metronic/layout/MasterLayout'
import {DashboardWrapper} from '../pages/dashboard/DashboardWrapper'
import {MenuTestPage} from '../pages/MenuTestPage'
+ import {MyPage} from "../pages/MyPage"


export function PrivateRoutes() {
  const BuilderPageWrapper = lazy(() => import('../pages/layout-builder/BuilderPageWrapper'))
  const ProfilePage = lazy(() => import('../modules/profile/ProfilePage'))
  const WizardsPage = lazy(() => import('../modules/wizards/WizardsPage'))
  const AccountPage = lazy(() => import('../modules/accounts/AccountPage'))
  const WidgetsPage = lazy(() => import('../modules/widgets/WidgetsPage'))
  const ChatPage = lazy(() => import('../modules/apps/chat/ChatPage'))


  return (
    return (
      <Routes>
        <Route element={<MasterLayout />}>
          {/* Redirect to Dashboard after success login/registartion */}
          <Route path='auth/*' element={<Navigate to='/dashboard' />} />
          {/* Pages */}
          +<Route path="/my-page" element={<MyPage />} />
          <Route path='dashboard' element={<DashboardWrapper />} />
          <Route path='builder' element={<BuilderPageWrapper />} />
          <Route path='menu-test' element={<MenuTestPage />} />
          {/* Lazy Modules */}
          <Route
            path='crafted/pages/profile/*'
            element={
              <SuspensedView>
                <ProfilePage />
              </SuspensedView>
            }
          />
          <Route
            path='crafted/pages/wizards/*'
            element={
              <SuspensedView>
                <WizardsPage />
              </SuspensedView>
            }
          />
          <Route
            path='crafted/widgets/*'
            element={
              <SuspensedView>
                <WidgetsPage />
              </SuspensedView>
            }
          />
          <Route
            path='crafted/account/*'
            element={
              <SuspensedView>
                <AccountPage />
              </SuspensedView>
            }
          />
          <Route
            path='apps/chat/*'
            element={
              <SuspensedView>
                <ChatPage />
              </SuspensedView>
            }
          />
          {/* Page Not Found */}
          <Route path='*' element={<Navigate to='/error/404' />} />
        </Route>
      </Routes>
  )
}

```

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

### Enable Dark Mode SCSS Import in React

Source: https://preview.keenthemes.com/metronic8/react/docs/dark-mode

This snippet shows how to replace the default SCSS import with the dark mode SCSS file in the `index.tsx` file to enable dark mode styling. This is a direct replacement of one import statement.

```typescript
- import './_metronic/assets/sass/style.scss'
+ import './_metronic/assets/sass/style.dark.scss'
```

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

### Basic Indicator Component Implementation (HTML)

Source: https://preview.keenthemes.com/metronic8/react/docs/indicator

Demonstrates the basic implementation of the Indicator component using HTML. It shows how to structure the button with separate spans for the label and progress message, and how to activate the indicator using the 'data-kt-indicator="on"' attribute.

```html
<button type="button" className="btn btn-primary me-10">
    <span className="indicator-label">
        Submit
    </span>
    <span className="indicator-progress">
        Please wait... <span className="spinner-border spinner-border-sm align-middle ms-2"></span>
    </span>
</button>


<button type="button" className="btn btn-primary" data-kt-indicator="on">
    <span className="indicator-label">
        Submit
    </span>
    <span className="indicator-progress">
        Please wait... <span className="spinner-border spinner-border-sm align-middle ms-2"></span>
    </span>
</button>
```

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

### React: Custom Sized Form Switches

Source: https://preview.keenthemes.com/metronic8/react/docs/forms

Provides examples of form switches with custom dimensions using Metronic's height ('h-') and width ('w-') utility classes. This allows for precise control over the switch's visual size, accommodating various design requirements. The examples show 20x30px, 30x50px, and 40x60px configurations.

```jsx
<div className="form-check form-switch form-check-custom form-check-solid me-10">
  <input className="form-check-input h-20px w-30px" type="checkbox" value="" id="flexSwitch20x30"/>
  <label className="form-check-label" for="flexSwitch20x30">
      20px x 30px
  </label>
</div>


<div className="form-check form-switch form-check-custom form-check-solid me-10">
  <input className="form-check-input h-30px w-50px" type="checkbox" value="" id="flexSwitch30x50"/>
  <label className="form-check-label" for="flexSwitch30x50">
      30px X 50px
  </label>
</div>


<div className="form-check form-switch form-check-custom form-check-solid me-10">
  <input className="form-check-input h-40px w-60px" type="checkbox" value="" id="flexSwitch40x60"/>
  <label className="form-check-label" for="flexSwitch40x60">
      40px X 60px
  </label>
</div>
```

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

### Range Selection in Flatpickr React

Source: https://preview.keenthemes.com/metronic8/react/docs/flatpickr

Shows how to implement range date selection in Flatpickr. The `mode` option is set to 'range', allowing users to select a start and end date. The `onChange` event provides an array containing the start and end dates, managed via `useState`. Note that disabled dates are not selectable in range mode.

```javascript
const Example5: FC = () => {
  const [dateState, setDateState] = useState<any>({
    startDate: new Date(),
    endDate: new Date()
  });


  return <>
      <Flatpickr
        value={dateState.date}
        onChange={([ startDate, endDate ]) => {
          setDateState({ startDate, endDate });
        }}
        options={{
          mode: "range"
        }}
        className='form-control form-control-solid'
        placeholder='Pick date'
      />
  </>
}
```

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

### Toggle Active State and Rotate Icons

Source: https://preview.keenthemes.com/metronic8/react/docs/rotate

Provides examples of buttons where clicking toggles the 'active' class on the button element itself, dynamically rotating the associated icon. This utilizes an inline `onClick` handler to manage the class toggle. Note that some examples show the icon rotating to 90 degrees regardless of the button's intended rotation.

```jsx
<button type="button" className="btn btn-primary me-5 rotate" onClick={(e) => e.currentTarget.classList.toggle('active')}>
  90 deg{" "}
  <KTSVG
    path="media/icons/duotune/arrows/arr069.svg"
    className="svg-icon-2 rotate-90 ms-3"
  />
</button>


<button type="button" className="btn btn-danger me-5 rotate" onClick={(e) => e.currentTarget.classList.toggle('active')}>
  180 deg{" "}
  <KTSVG
    path="media/icons/duotune/arrows/arr069.svg"
    className="svg-icon-2 rotate-90 ms-3"
  />
</button>
<button type="button" className="btn btn-success me-5 rotate" onClick={(e) => e.currentTarget.classList.toggle('active')}>
  180 deg{" "}
  <KTSVG
    path="media/icons/duotune/arrows/arr069.svg"
    className="svg-icon-2 rotate-90 ms-3"
  />
</button>
```

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

### Card with Border

Source: https://preview.keenthemes.com/metronic8/react/docs/cards

This example shows a card with a border instead of a shadow, achieved by adding the `.card-border` class. This is useful for creating distinct visual separations.

```html
<div className="card card-custom card-border">
  <div className="card-header">
      <h3 className="card-title">Title</h3>
      <div className="card-toolbar">
          <button type="button" className="btn btn-sm btn-light">
              Action
          </button>
      </div>
  </div>
  <div className="card-body">
      Lorem Ipsum is simply dummy text...
  </div>
  <div className="card-footer">
      Footer
  </div>
</div>
```

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

### React: Build Nested Layouts with Flex Classes

Source: https://preview.keenthemes.com/metronic8/react/docs/helpers/flex-layout

Demonstrates using Metronic's responsive flex classes in React to create nested layouts with fixed and fluid columns. This example showcases various combinations of flex properties like `flex-row-auto`, `flex-column-fluid`, and `flex-center` to control layout dimensions and content alignment. No external dependencies beyond React itself are required for these classes.

```jsx
<div className="d-flex flex-row h-300px">
  <div className="d-flex flex-column flex-row-auto w-200px">
      <div className="d-flex flex-column-auto h-50px bg-primary">
          <span className="text-white">Fixed Height</span>
      </div>


      <div className="d-flex flex-column-fluid bg-success flex-center">
          <span className="text-white">Fluid Height</span>
      </div>
  </div>


  <div className="d-flex flex-column flex-row-fluid">
      <div className="d-flex flex-column-auto h-70px bg-info flex-center">
          <span className="text-white">Fixed Height</span>
      </div>


      <div className="d-flex flex-row flex-column-fluid">
          <div className="d-flex flex-row-fluid bg-dark flex-center">
              <span className="text-white">Fluid Width</span>
          </div>


          <div className="d-flex flex-row-auto w-200px bg-warning flex-center">
              <span className="text-white">Fixed Width</span>
          </div>
      </div>
  </div>
</div>
```

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

### Metronic Width & Height Utility Classes (HTML)

Source: https://preview.keenthemes.com/metronic8/react/docs/utilities

These classes provide responsive control over an element's width and height properties, including min/max values. They utilize a `{property}-{size}` format and support responsive breakpoints.

```html
<div className="w-100px h-100px"></div>
<div className="w-150px h-150px"></div>
<div className="w-200px h-200px"></div>
<div className="w-250px h-250px"></div>
<div className="min-w-100px min-h-100px mw-100px mh-100px"></div>
<div className="min-w-150px min-h-150px mw-150px mh-150px"></div>
<div className="min-w-200px min-h-200px mw-200px mh-200px"></div>
<div className="min-w-250px min-h-250px mw-250px mh-250px"></div>
```

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

### Create React Page Component

Source: https://preview.keenthemes.com/metronic8/react/docs/create-a-page

This snippet shows how to create a basic React functional component for a new page. It defines the component's structure and its JSX return value. No external dependencies beyond React are required for this basic component.

```tsx
import React from "react";
                  
export function MyPage() {
    return <h1>Hello!</h1>
}
```

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

### React Flex Button with Icon and Text

Source: https://preview.keenthemes.com/metronic8/react/docs/buttons

Shows a button styled with `.btn-flex` to vertically center its content. This example includes an SVG icon and text with a description, utilizing flexbox properties.

```JSX
<a href="#" className="btn btn-flex btn-primary px-6">
  <span className="svg-icon svg-icon-2x"><svg>...</svg></span>
  <span className="d-flex flex-column align-items-start ms-2">
      <span className="fs-3 fw-bolder">Caption</span>
      <span className="fs-7">Some description</span>
  </span>
</a>
```

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

### Disable Search in React-Select

Source: https://preview.keenthemes.com/metronic8/react/docs/react-select

This example shows how to disable the search functionality in a React-Select component by setting the `isSearchable` attribute to `false`. This is useful when you want to provide a simple dropdown without search input. It requires an array of options and a placeholder.

```jsx
import { FC } from "react";
import Select from 'react-select'


const Example7: FC = () => {
    const options = [
        { value: 'option 1', label: 'Option 1' },
        { value: 'option 2', label: 'Option 2' },
        { value: 'option 3', label: 'Option 3' },
        { value: 'option 4', label: 'Option 4' },
        { value: 'option 5', label: 'Option 5' },
    ]


    return (
        <div className='mb-10'>
            <label className='form-label'>Clearable option</label>
            <Select 
                className='react-select-styled react-select-solid'
                classNamePrefix='react-select'
                options={options}
                placeholder='Select an option'
                isSearchable={false}
            />
        </div>
    )
}


export { Example7 };

```

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

### React: Basic Overlay Effect with Buttons

Source: https://preview.keenthemes.com/metronic8/react/docs/overlay

This snippet demonstrates how to implement a basic overlay effect on images using the `.overlay`, `.overlay-wrapper`, and `.overlay-layer` classes in React. It includes buttons within the overlay layer for interaction. The overlay background color and opacity can be adjusted using utility classes like `.bg-dark .bg-opacity-10`.

```jsx
<div className="row">
  <div className="col-lg-4">
    <div className="card card-custom overlay overflow-hidden">
      <div className="card-body p-0">
        <div className="overlay-wrapper">
          <img
            src={toAbsoluteUrl('media/stock/600x400/img-1.jpg')}
            alt=""
            className="w-100 rounded"
          />
        </div>
        <div className="overlay-layer bg-dark bg-opacity-10">
          <a href="#" className="btn btn-primary btn-shadow">
            Explore
          </a>
          <a
            href="#"
            className="btn btn-light-primary btn-shadow ms-2"
          >
            Purchase
          </a>
        </div>
      </div>
    </div>
  </div>
  <div className="col-lg-4">
    <div className="card card-custom overlay overflow-hidden">
      <div className="card-body p-0">
        <div className="overlay-wrapper">
          <img
            src={toAbsoluteUrl('media/stock/600x400/img-2.jpg')}
            alt=""
            className="w-100 rounded"
          />
        </div>
        <div className="overlay-layer bg-dark bg-opacity-10 align-items-end justify-content-center">
          <div className="d-flex flex-grow-1 flex-center py-5">
            <a href="#" className="btn btn-primary btn-shadow">
              Explore
            </a>
            <a
              href="#"
              className="btn btn-light-primary btn-shadow ms-2"
            >
              Purchase
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div className="col-lg-4">
    <div className="card card-custom overlay overflow-hidden">
      <div className="card-body p-0">
        <div className="overlay-wrapper">
          <img
            src={toAbsoluteUrl('media/stock/600x400/img-3.jpg')}
            alt=""
            className="w-100 rounded"
          />
        </div>
        <div className="overlay-layer bg-dark bg-opacity-10 align-items-start justify-content-center">
          <div className="d-flex flex-grow-1 flex-center py-5">
            <a href="#" className="btn btn-primary btn-shadow">
              Explore
            </a>
            <a
              href="#"
              className="btn btn-light-primary btn-shadow ms-2"
            >
              Purchase
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

```

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

### Basic Pulse Component Implementation in React

Source: https://preview.keenthemes.com/metronic8/react/docs/pulse

Demonstrates the fundamental usage of the Pulse component to highlight elements. It requires React and the KTSVG component for icon rendering. The output is an anchor tag with the 'pulse' class applied.

```jsx
<a href="#" className="btn btn-icon btn-light pulse me-10 mb-10">
  <KTSVG
    path="media/icons/duotune/general/gen025.svg"
    className="svg-icon svg-icon-1"
  />
  <span className="pulse-ring"></span>
</a>
```

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

### Import React-Select Component

Source: https://preview.keenthemes.com/metronic8/react/docs/react-select

This snippet shows how to import the core React-Select component for use in your React application. No external dependencies are required beyond React itself.

```javascript
import Select from 'react-select'
```

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

### Basic React Pagination Component

Source: https://preview.keenthemes.com/metronic8/react/docs/pagination

This React component renders a basic Bootstrap-styled pagination UI. It includes previous and next navigation links, along with numbered page links. The active page is visually distinguished. No external libraries are explicitly required beyond React itself.

```jsx
<ul className="pagination">
  <li className="page-item previous disabled">
    <a href="#" className="page-link">
      <i className="previous"></i>
    </a>
  </li>
  <li className="page-item">
    <a href="#" className="page-link">
      1
    </a>
  </li>
  <li className="page-item active">
    <a href="#" className="page-link">
      2
    </a>
  </li>
  <li className="page-item">
    <a href="#" className="page-link">
      3
    </a>
  </li>
  <li className="page-item">
    <a href="#" className="page-link">
      4
    </a>
  </li>
  <li className="page-item">
    <a href="#" className="page-link">
      5
    </a>
  </li>
  <li className="page-item">
    <a href="#" className="page-link">
      6
    </a>
  </li>
  <li className="page-item next">
    <a href="#" className="page-link">
      <i className="next"></i>
    </a>
  </li>
</ul>
```

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

### Set Border Gray Colors (React)

Source: https://preview.keenthemes.com/metronic8/react/docs/helpers/borders

Shows how to set custom border colors using Metronic's gray scale utility classes, ranging from `.border-gray-100` to `.border-gray-900`. These examples are presented in a React context.

```jsx
<div className="border border-gray-100"></div>
<div className="border border-gray-200"></div>
<div className="border border-gray-300"></div>
<div className="border border-gray-500"></div>
<div className="border border-gray-500"></div>
<div className="border border-gray-600"></div>
<div className="border border-gray-700"></div>
<div className="border border-gray-800"></div>
<div className="border border-gray-900"></div>
```

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

### React: Display Star Rating with Bootstrap Icons

Source: https://preview.keenthemes.com/metronic8/react/docs/rating

Illustrates how to implement a star rating component in React using Bootstrap Icons. This example utilizes the 'bi bi-star' class and the 'checked' modifier for filled stars.

```jsx
<div className="rating">
  <div className="rating-label me-2 checked">
    <i className="bi bi-star fs-1"></i>
  </div>
  <div className="rating-label me-2 checked">
    <i className="bi bi-star fs-1"></i>
  </div>
  <div className="rating-label me-2 checked">
    <i className="bi bi-star fs-1"></i>
  </div>
  <div className="rating-label me-2 checked">
    <i className="bi bi-star fs-1"></i>
  </div>
  <div className="rating-label me-2 checked">
    <i className="bi bi-star fs-1"></i>
  </div>
</div>
```
Tokens:
Raw