# Getting Started with the KendoReact Inputs
This guide provides essential information about using the KendoReact Inputs package—you will learn how to install the package and add a free React Inputs component to your project. The steps demonstrated in this guide are applicable to all KendoReact Inputs (free and premium).
After completing this guide, you will have a free React [Input](https://www.telerik.com/kendo-react-ui/components/inputs) up and running.
[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/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 Inputs package, run the following command in the root folder of your React project:
```sh
npm i @progress/kendo-react-inputs
```
## Importing 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 Inputs components are identical.
```tsx
import { Input } from '@progress/kendo-react-inputs';
import '@progress/kendo-theme-meridian/dist/all.css';
```
## Use the Components
> Using the free KendoReact Inputs components does not require a license, even in production. To work with any of the premium components in the package, you need a [commercial license key or an active trial license key](https://www.telerik.com/kendo-react-ui/components/my-license).
1. After installing the Inputs package and importing the components, add the Input tags 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 Input 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).
## Next Steps
Now try to add another component from the Inputs package yourself. The procedures for [installing](https://www.telerik.com/kendo-react-ui/components/inputs/get-started#install-the-components), [importing](https://www.telerik.com/kendo-react-ui/components/inputs/get-started#importing-the-components), and [using](https://www.telerik.com/kendo-react-ui/components/inputs/get-started#use-the-components) the Inputs components are identical for all components in the package.
The Inputs package provides the following components:
* [CheckBox](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox)
* [ColorPallete](https://www.telerik.com/kendo-react-ui/components/inputs/colorpalette)
* [TextBox](https://www.telerik.com/kendo-react-ui/components/inputs/textbox)
* [MaskedTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox)
* [NumericTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox)
* [RadioButton](https://www.telerik.com/kendo-react-ui/components/inputs/radiobutton)
* [Slider](https://www.telerik.com/kendo-react-ui/components/inputs/slider)
* [Rating](https://www.telerik.com/kendo-react-ui/components/inputs/rating)
* [Switch](https://www.telerik.com/kendo-react-ui/components/inputs/switch)
* [TextArea](https://www.telerik.com/kendo-react-ui/components/inputs/textarea)
* [Input](https://www.telerik.com/kendo-react-ui/components/inputs/input)
* [ColorGradient](https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient) (premium)
* [ColorPicker](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker) (premium)
* [FlatColorPicker](https://www.telerik.com/kendo-react-ui/components/inputs/flatcolorpicker) (premium)
* [Signature](https://www.telerik.com/kendo-react-ui/components/inputs/signature) (premium)
* [RangeSlider](https://www.telerik.com/kendo-react-ui/components/inputs/rangeslider) (premium)
# KendoReact Inputs APIs
[Inputs API](https://www.telerik.com/kendo-react-ui/components/inputs/api)
## KendoReact Inputs Dependencies
The Inputs 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-intl | Contains the KendoReact Internationalization package that applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers. |
| @progress/kendo-drawing | Contains the Drawing library, which provides interactive vector graphics. |
| @progress/kendo-svg-icons | Contains the KendoReact SVG icons. |
## Activating Your License Key
**Important**: The KendoReact Inputs have both free and premium features. Only the premium features require a license key file to be installed in your project:
* **Trial usage**: [Start a free trial](https://www.telerik.com/try/kendo-react-ui) and download a trial license key file
* **Commercial usage**: [Purchase a license](https://www.telerik.com/kendo-react-ui/pricing) and download a commercial license key file
Without a valid license key file, the premium features will display licensing warnings and watermarks.
Follow the instructions on the KendoReact [My License page](https://www.telerik.com/kendo-react-ui/components/my-license) to download and install your license key file. You can skip this step if your application already contains a KendoReact license file.
## Suggested Links
* [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/)