Get Started with KendoReact Server Components

KendoReact Server Components are distributed separately from the regular KendoReact package. They are currently in a technology preview phase and are not recommended for production use.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.


  • Node.js version 18.0.0 or later.
  • Next.js version 13.0.0 or later, with app router.
  • react@canary version 18.3.0-canary. You do not need to install this package manually, as it is already shipped in Next.js.

Create a Next.js Project

For the purposes of this tutorial, start by creating an empty Next.js project, ensuring that the routing is enabled (you can use any other RSC-compatible environment, when available):

npx create-next-app my-test-rsc-app --ts --app --no-src-dir


Next, navigate to the root of your app and install the KendoReact Server Components package, along with the default Kendo theme packages:

npm install @progress/kendo-react-server-components @progress/kendo-theme-default

Import the Server Components

To start using the KendoReact Server Components, import the Grid component in your Next.js application. Add the import in the existing page.tsx file:

// page.tsx

import { Grid } from "@progress/kendo-react-server-components";

Import the Theme & Icons

To enhance the visual appearance of the Grid, make sure to import the Kendo Default theme and font icons in your layout file:

// layout.tsx

import "@progress/kendo-theme-default/dist/all.css";

The Default theme is just one option in the collection of four stunning Telerik and Kendo UI themes. Feel free to explore and experiment with any of these themes to find the perfect visual style for your project.

Use the Server Components

Now, you can use the KendoReact Server Components without explicitly including a "use client"; directive.

// pages.tsx

    .then((resp) => resp.json())
    .then((json) => json.value)}
    model: {
      id: "ProductID",
    columns: [
      { field: "ProductID", title: "ID", width: 50 },
      { field: "ProductName", title: "Name" },
      { field: "UnitPrice", title: "Price" },
      { field: "UnitsInStock", title: "In stock" },

After completing the steps above, you will be able to reproduce the following example:

View Source
Change Theme:

To learn more about how to configure the Grid component, refer to the Grid Overview documentation.

Additional Resources