Getting Started with the KendoReact Layout

This guide provides essential information about using the KendoReact Layout package—you will learn how to install the package, add a PanelBar component to your project, style the component, and activate your license. The steps demonstrated in this guide are applicable to all KendoReact Layout components.

Use React Layout for FreeYou can use the free components from the React Layout package in production—no sign-up or license required. Layout is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To test-drive premium components, start a 30-day trial.

After completing this guide, you will be able to reproduce the following example.

Change Theme

Theme

Loading ...

Before You Begin

npm create vite@latest my-app -- --template react

This guide requires that you have basic knowledge of React and TypeScript, and that you have already created a blank React project.

You can speed up the development of your KendoReact application with the Kendo UI Template Wizard for Visual Studio Code.

Install the Component

Navigate to the root folder of your React project and run the following command:

npm i @progress/kendo-react-layout

Run these commands in the root of your React project to install the KendoReact Layout package and its dependencies, and the Kendo UI Default theme.

Import the Component

After installing the Layout package, import the desired components in the React App.

In the src/App.js file of your React project, import the PanelBar component from the Layout package. To use items in the PanelBar, add the PanelBarItem component as well.

tsx

// ES2015 module syntax
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';

tsx

// CommonJS format
const { PanelBar, PanelBarItem } = require('@progress/kendo-react-layout');

Place the import statements in the App component file (for example: src/App.tsx) for your project.

Use the Component

After installing the Layout package and importing the components, add the tags of the desired components to the src/App.tsx file in your project.

tsx

const App = () => {
    return (
        <PanelBar>
            <PanelBarItem title={'Teams'}>
                <PanelBarItem title={'Team 1'} />
                <PanelBarItem title={'Team 2'} />
            </PanelBarItem>
            <PanelBarItem title="Releases">
                <PanelBarItem title="Q1 2021" />
                <PanelBarItem title="Q2 2021" />
            </PanelBarItem>
        </PanelBar>
    );
};

export default App;

Build and run the application by typing the following command in the root folder of your project:
sh
```
npm start
```
Navigate to http://localhost:3000 to see the KendoReact PanelBar component on the page.

Style the Component

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.

To use the built-in styling of the components, start by installing a theme:

npm i @progress/kendo-theme-default

With the import "@progress/kendo-theme-default/dist/all.css"; statement present in your code, 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.

Package Name	Description
react 16.8.2*	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-progressbars	Contains the KendoReact ProgressBar component.
@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-svg-icons	Contains the KendoReact SVG icons.
@progress/kendo-react-animation	Enables the animations in the KendoReact components.
@progress/kendo-react-buttons	Contains the KendoReact Button components.
@progress/kendo-react-common	Contains common utilities that enhance the performance and functionalities of the KendoReact UI components.
@progress/kendo-react-popup	Contains positioning logic for the Popup component.
@progress/kendo-react-progressbars	Contains the KendoReact ProgressBar component.

Getting Started with the KendoReact Layout

Before You Begin

Install the Component

Import the Component

Use the Component

Style the Component

Next Steps

KendoReact Layout APIs

KendoReact Layout Dependencies

Suggested Links