New to KendoReact? Start a free 30-day trial

Using with Astro

Astro is a modern static site builder that allows you to mix and match front-end frameworks like React, Vue, and Svelte. It focuses on performance by shipping minimal JavaScript to the browser and supports SSR (Server-Side Rendering), as well as Static Site Generation (SSG).

Prerequisites

KendoReact now offers seamless compatibility with React 19, empowering you to build modern, fast, and robust UI components with confidence. Start building with the latest version of React today!

NodeJS v18.17.1 or v20.3.0 (v19 is not supported by Astro). Use the node -v command to check your node versions.
Text editor - Using VS Code with the Official Astro extension is recommended.
Terminal - Astro is accessed through its command-line interface (CLI).

Create an Astro project

You can set up an Astro project by using the following command:

npm create astro@latest

After running npm create astro@latest, you will be prompted with a couple of options that you can choose based on your preference:

shell

npm create astro@latest
Where should we create your new project? » ./opposite-orbit
How would you like to start your new project? » No / Yes
Do you plan to write TypeScript? » No / Yes
How strict should TypeScript be? » Strict/Strictest/Relaxed
Install dependencies? » No / Yes
Initialize a new git repository? » No / Yes

Installing and integrating React

Now that we have a working Astro project, our next step is to install react and react-dom packages by running:

npm install react react-dom @astrojs/react

Open astro.config.mjs and add the React integration:

jsx

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
    integrations: [react()]
});

Create an Astro Project using Kendo CLI

As an alternative to the default way of creating Astro projects, we at Kendo provide our own CLI that helps you generate projects with JavaScript or TypeScript. To generate a project with our CLI, you have to do the following:

Install the @progress/kendo-cli package using the following command:

shell

npm install --global @progress/kendo-cli

Use the following command to generate a new Astro project with Typescript:
- npx kendo react create astro MyKendoApp

The CLI also provides an option to define which Kendo Theme will be added to the generated project. To set a theme, add one of the following to the above commands:

--theme=default - Adds the Kendo Default Theme
--theme=bootstrap - Adds the Kendo Bootstrap Theme
--theme=material - Adds the Kendo Material Theme
--theme=fluent - Adds the Kendo Fluent Theme

The CLI allows you to specify the preferred styling. By default, the project will use CSS, but you can specify Sass if needed:

--styling=CSS - Use CSS styling (default)
--styling=Sass - Use Sass styling

The result of using the Kendo CLI will be an Astro project that has a KendoReact Grid component added to it. The idea behind the CLI we provide is to help you test our components fast and easy, however, you don't necessarily need to use it if you prefer the default Astro CLI.

Below you will find information on how we can add components to a Astro project, no matter how it is generated.

Using KendoReact Components in an Astro Project

With our Astro project configured to use React, we can now start integrating KendoReact components into our application.

Install the Grid Package

All KendoReact packages are distributed through npm and offer a similar installation experience. The dependencies needed for the installation of each component package are listed in a dedicated Getting Started article on the component package level, for example, Getting Started with the React Grid.

To use the KendoReact Grid package in your Astro project, first, install the following KendoReact packages by using NPM or YARN.

npm i @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-buttons @progress/kendo-react-treeview @progress/kendo-react-popup @progress/kendo-svg-icons

Import the Grid component

After installing the needed packages, you can import the Grid component in the Astro app. Within the components folder, create a grid subfolder and add a Grid.jsx file.

jsx

import React from 'react';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

Use the Grid component

Define the data we want to display in the Grid

jsx

const products = [
    {
        ProductID: 1,
        ProductName: 'Chai',
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: '10 boxes x 20 bags',
        UnitPrice: 18.0,
        UnitsInStock: 39,
        UnitsOnOrder: 0,
        ReorderLevel: 10,
        Discontinued: false,
        Category: {
            CategoryID: 1,
            CategoryName: 'Beverages',
            Description: 'Soft drinks, coffees, teas, beers, and ales'
        }
    },
    {
        ProductID: 2,
        ProductName: 'Chang',
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: '24 - 12 oz bottles',
        UnitPrice: 19.0,
        UnitsInStock: 17,
        UnitsOnOrder: 40,
        ReorderLevel: 25,
        Discontinued: false,
        Category: {
            CategoryID: 1,
            CategoryName: 'Beverages',
            Description: 'Soft drinks, coffees, teas, beers, and ales'
        }
    }
];

Add the Column definitions to the Grid:

jsx

<Grid data={products}>
    <Column field="ProductID" title="ID" />
    <Column field="ProductName" title="Name" />
    <Column field="Category.CategoryName" title="Category" />
    <Column field="UnitPrice" title="Price" />
    <Column field="UnitsInStock" title="In stock" />
    <Column field="Discontinued" title="Discontinued" />
</Grid>

This is how the full content of Grid.jsx should look like in the end:

jsx

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

const AstroGrid = () => {
    const products = [
        {
            ProductID: 1,
            ProductName: 'Chai',
            SupplierID: 1,
            CategoryID: 1,
            QuantityPerUnit: '10 boxes x 20 bags',
            UnitPrice: 18.0,
            UnitsInStock: 39,
            UnitsOnOrder: 0,
            ReorderLevel: 10,
            Discontinued: false,
            Category: {
                CategoryID: 1,
                CategoryName: 'Beverages',
                Description: 'Soft drinks, coffees, teas, beers, and ales'
            }
        },
        {
            ProductID: 2,
            ProductName: 'Chang',
            SupplierID: 1,
            CategoryID: 1,
            QuantityPerUnit: '24 - 12 oz bottles',
            UnitPrice: 19.0,
            UnitsInStock: 17,
            UnitsOnOrder: 40,
            ReorderLevel: 25,
            Discontinued: false,
            Category: {
                CategoryID: 1,
                CategoryName: 'Beverages',
                Description: 'Soft drinks, coffees, teas, beers, and ales'
            }
        }
    ];

    return (
        <Grid data={products}>
            <Column field="ProductID" title="ID" />
            <Column field="ProductName" title="Name" />
            <Column field="Category.CategoryName" title="Category" />
            <Column field="UnitPrice" title="Price" />
            <Column field="UnitsInStock" title="In stock" />
            <Column field="Discontinued" title="Discontinued" />
        </Grid>
    );
};

export default AstroGrid;

To style the Grid, install and import the Default theme, which is one of the four beautiful themes for KendoReact.

4.1. Install the Default theme package.
sh
```
npm install --save @progress/kendo-theme-default
```
4.2. Import the CSS file from the package in the main Grid.jsx file.
jsx
```
import '@progress/kendo-theme-default/dist/all.css';
```

Inside the pages folder create a grid.astro page and import the Grid.jsx:

jsx

---
import Component from '../components/grid/Grid.jsx';
---
 <Component client:load />

Start a development server by typing the following command in the root folder of your project:
sh
```
npm run dev
```
Navigate to http://localhost:3000/grid to preview the Grid.

Activating Your License Key

Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.

Since version 5.16.0 (26 July 2023) of KendoReact, a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section.