---
title: Overview
page_title: Gauges Overview - Components - Kendo UI Wrappers for React
description: "Learn about the Kendo UI wrappers for React which are delivered by the Gauges package."
slug: overview_gauges
position: 0
---

# Gauges Overview

The Gauges package provide a set of components for building common gauge types.

<div class="row components-overview-list mt-40 mb-50 pb-50 separator-bottom">
<a href="{% slug overview_lineargauge %}" class="col-md-4">
<svg id="lineargauge" viewbox="0 0 72 72">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="4.8245" y1="75.4218" x2="65.1755" y2="40.5782">
        <stop  offset="0" style="stop-color:#FF9B5E"/>
        <stop  offset="8.618834e-02" style="stop-color:#FF8C5D"/>
        <stop  offset="0.1949" style="stop-color:#FF7F5B"/>
        <stop  offset="0.3" style="stop-color:#FF7B5B"/>
        <stop  offset="0.7" style="stop-color:#FF6358"/>
        <stop  offset="0.7835" style="stop-color:#FC5F59"/>
        <stop  offset="0.8701" style="stop-color:#F4525E"/>
        <stop  offset="0.9577" style="stop-color:#E63E65"/>
        <stop  offset="1" style="stop-color:#DD3169"/>
    </linearGradient>
  </defs>
  <path d="M30,33h12v36H30V33z M30,3h12v18H30V3z M18,24v6h30l6-6H18z"/>
</svg>
<div class="h4 mt-10 mb-5">LinearGauge</div>
<p>A component for representing values on a linear scale.</p>
</a>
<a href="{% slug overview_radialgauge %}" class="col-md-4">
<svg id="radialgauge" viewbox="0 0 72 72">
  <path d="M30.3,54h8.5L72,20.7v-8.5L30.3,54z M36,12c8.3,0,15.9,3.4,21.3,8.9l4.2-4.2C55.1,10.1,46,6,36,6  C16.1,6,0,22.1,0,42c0,9.2,3.5,17.5,9.1,23.9l4.2-4.2C8.8,56.4,6,49.5,6,42C6,25.4,19.4,12,36,12z M64.8,33.9  c0.7,2.6,1.2,5.3,1.2,8.1c0,7.5-2.8,14.4-7.4,19.6l4.2,4.2C68.5,59.5,72,51.2,72,42c0-4.5-0.9-8.9-2.4-12.9L64.8,33.9z"/>
</svg>
<div class="h4 mt-10 mb-5">RadialGauge</div>
<p>A component for representing values on a circular arc.</p>
</a>
</div>

## Basic Usage

The following example demonstrates the Linear and Radial Gauges in action.

```jsx-preview
class GaugesContainer extends React.Component {
    constructor(props) {
        super(props);
        this.value = props.value;
    }

    render() {
        return (
            <div className="example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                   <p>LinearGauge</p>
                   <LinearGauge pointer={{value: this.value}}/>
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                   <p>RadialGauge</p>
                   <RadialGauge pointer={{value: this.value}} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <GaugesContainer value={30}/>,
    document.querySelector('my-app')
);
```

## Installation

All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, import from the package only the desired component.

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-gauges-react-wrapper
    ```

2. Once installed, import the desired component from the package.

    ```sh
        import { LinearGauge } from '@progress/kendo-gauges-react-wrapper';
    ```

    The package also exports the following individual components:

      * LinearGauge
      * RadialGauge

3. You are required to install one of the Kendo UI themes to style your components.

## Dependencies

The Gauges package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Suggested Links

* [Get Started with the Linear Gauge]({% slug overview_lineargauge %})
* [Get Started with the Radial Gauge]({% slug overview_radialgauge %})