# Getting Started with the KendoReact Indicators
This guide provides essential information about using the KendoReact Indicators package—you will learn how to install the package and add a free Indicator component to your project. The steps demonstrated in this guide are applicable to all KendoReact Indicators.
After completing this guide, you will have a free React [Loader](https://www.telerik.com/kendo-react-ui/components/indicators/loader) up and running.
[Demo Source](https://demos.telerik.com/kendo-react-ui/indicators/get-started/func/source.txt)
## Before You Begin
To follow the steps in this guide, you need to have a React project set up. If you don't have one, you can create a new React application using Vite by running the following command in your terminal:
```sh
npm create vite@latest my-app -- --template react-ts
```
This guide requires that you have **basic knowledge of React and TypeScript**, and that you have already created [**a blank React project**](https://www.telerik.com/kendo-react-ui/components/getting-started).
> tip You can speed up the development of your KendoReact application with the [Kendo UI Template Wizard for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard).
## Install the Components
To install the Indicators package, run the following command in the root folder of your React project:
```sh
npm i @progress/kendo-react-indicators @progress/kendo-theme-meridian
```
Run these commands in the root of your React project to install the KendoReact Indicators package and its [dependencies](https://www.telerik.com/kendo-react-ui/components/indicators/get-started#kendoreact-indicators-dependencies), and the Kendo UI [Meridian theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/).
## Import the Components
Place the `import` statements in the App component file (for example: `src/App.tsx`) for your project. Note that the steps for installing and importing all Indicators components are identical.
```tsx
import { Loader } from '@progress/kendo-react-indicators';
import '@progress/kendo-theme-meridian/dist/all.css';
```
## Use the Components
1. After installing the Indicators package and importing the components, add the Loader tag to the App component file of your React project (for example, `src/App.tsx`).
```tsx
```
2. Build and run the application by typing the following command in the root folder of your project:
```sh
npm run dev
```
3. Navigate to [http://localhost:5173](http://localhost:5173/) to see the KendoReact Loader component on the page.
## Style the Components
> tip Are you looking for guidance around how to create visually appealing and consistent user interfaces with Telerik UI components? Check out the [Progress Design System](https://www.telerik.com/design-system/docs/).
To use the built-in styling of the components start by installing a theme:
```sh
npm i @progress/kendo-theme-meridian
```
Import the CSS file from the package in `src/App.tsx`. Add this import before your existing `App.css` import:
```jsx
import '@progress/kendo-theme-meridian/dist/all.css';
```
With this import in place, you already have professionally designed styling applied to your app out-of-box. You can also try any of the other available [Kendo UI Themes](https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-themes).
Additionally, the Indicators provide built-in appearance properties which let you control the size of the component. Try to play around with the [appearance](https://www.telerik.com/kendo-react-ui/components/indicators/loader/appearance) of your Loader.
```tsx
```
## Next Steps
Now try to add another component from the Indicators package yourself. The procedures for [installing](https://www.telerik.com/kendo-react-ui/components/indicators/get-started#install-the-components), [importing](https://www.telerik.com/kendo-react-ui/components/indicators/get-started#import-the-components), and [using](https://www.telerik.com/kendo-react-ui/components/indicators/get-started#use-the-components) the Indicators components are identical for all components in the package.
The Indicators package provides the following components:
* [Badge](https://www.telerik.com/kendo-react-ui/components/indicators/badge)
* [Loader](https://www.telerik.com/kendo-react-ui/components/indicators/loader)
* [Skeleton](https://www.telerik.com/kendo-react-ui/components/indicators/skeleton)
## KendoReact Indicators APIs
[Indicators API](https://www.telerik.com/kendo-react-ui/components/indicators/api)
## KendoReact Indicators Dependencies
The Indicators package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
| Package Name | Description |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
| react 18.0.0\* | Contains the functionality necessary to define React components. |
| react-dom | Contains the React renderer for the web. |
| @progress/kendo-licensing | Contains the internal infrastructure related to licensing. |
| @progress/kendo-react-common | Contains common utilities that enhance the performance and functionalities of the KendoReact UI components. |
## Suggested Links
* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started)
* [Virtual Classroom (Introductory Course Available to Trial and Commercial License Holders)](https://learn.telerik.com/learn/course/external/view/elearning/14/kendoreact)
* [Explore the Finance Portfolio Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/finance-application/)
* [Explore the Coffee Warehouse Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/)
* [Explore the GitHub Issues Grid Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/issues-grid/)