KendoReact: Integration with Astro

KendoReact is now integrated with Astro, a performance-focused static site builder that supports server-side rendering. This addition reflects our ongoing commitment to supporting the most popular development tools and enhancing your developer experience. Follow our new getting started article to quickly set up an Astro project with KendoReact either by installing Astro and integrating React and KendoReact on your own, or through the Kendo UI CLI. By using the CLI, you can also easily add one of the Kendo UI themes to the project and select Sass or CSS as your preferred styling.

Getting Started with KendoReact and Astro (tutorial)

KendoReact: Unstyled Mode Preview

The new KendoReact Unstyled Mode Preview offers you the full power and functionality of the KendoReact components, stripping down our default CSS classes. This gives you the flexibility to apply your own custom styles using custom CSS classes or your design system and avoid conflicting styles or overwriting KendoReact defaults. As a bonus, you reduce your bundle size by only including the exact styles you need. Those who love the convenience of our pre-built themes but want to style just a few components differently can use the themes alongside unstyled KendoReact components.

For the preview version, unstyled mode is available for the following components: Animations, Buttons, DateInput, DateTimePicker, TimePicker, DropdownList, Combobox, Form, Inputs, Labels, Popup, SvgIcon. Unstyled mode is straightforward to implement – so check it out today and send us your feedback to make sure we reflect your needs in the KendoReact roadmap!

See the KendoReact Unstyled Mode documentation

Kendo UI CLI Integration with Vite

Enjoy a smooth getting started experience with Vite through the Kendo UI CLI Vite integration. Use the Vite build tool to easily set up a KendoReact project with JSX or Typescript, automating the installation and basic configuration of our UI component library. By using our CLI, you can also easily add one of the Kendo UI themes to the project and select Sass or CSS as your preferred styling. 

Getting Started with KendoReact and Vite (tutorial)

KendoReact Charts: Patterns, No Data Overlay and Sankey Keyboard Navigation

The latest enhancements to the KendoReact Charts library include:

• Support for a customizable pattern fill of the chart series. Now, instead of using only solid colors, you can spice things up by filling chart elements with different patterns such as diagonal stripes, dots or a grid pattern.
• No-data overlay – this ready-to-use template improves the user experience in those tricky empty-state scenarios when there is no data to visualize.
• Keyboard navigation for the Sankey diagram - The Sankey now comes with keyboard navigation enabled out of the box, making sure the main interactive parts of the Sankey diagram are reachable through the keyboard.

More KendoReact Updates and Enhancements

Other KendoReact enhancements that shipped with the Q4 release include:

• Spreadsheet enhancement: CSP compliance
• DateInput and TabStrip UX Improvements
• Accessibility: Keyboard navigation enhancements
• Migrated from class to functional: Data Grid, Animation, Button, DropDownButton, Toolbar, Pager, DropDownList, Checkbox, Labels, FloatingALabel, Popup, Input, ActionSheet
• Migration to Dart Sass and deprecation of node Sass

NEW Product: Page Templates and Building Blocks!

We are proud to announce the latest addition to our portfolio—brand new Page Templates and Building Blocks designed to help you build stunning apps even faster!  
You can now utilize our 10 professionally designed, highly customizable and accessible page templates to quickly and easily bootstrap a variety of landing pages, product listings and dashboard pages.  
Additionally, our 50+ ready to copy-and-paste, fully responsive and customizable building blocks have everything from layouts and tables to hero sections, pricing, dashboard elements and more! 

Explore the Page Templates and Building Blocks  
 

KendoReact: New Chart Wizard Component

The new KendoReact Chart Wizard component enables you to create a chart using data from a grid, another data-bound component, or an external source. By utilizing its user-friendly interface, you can easily set up a variety of chart elements, including chart types, series, category and value axis, legend, area, title, and data source.  

See the React Chart Wizard demo  
 

KendoReact: Data Grid Chart Integration

Now you can easily integrate a chart within the grid to get a visual representation of data, trends, patterns and outliers in a much more convenient and easier-to-grasp format compared to raw table data. Simply use the KendoReact Chart Wizard component to quickly create the desired chart using the grid data. 

See the React Grid Chart Integration demo  

KendoReact Data Grid: multiple enhancements

Тhe Progress® KendoReact™ Data Grid is now enriched with multiple enhancements, including:  
-The ability to print a pageable and scrollable grid  
-Support for responsive columns  
-Improved keyboard navigation, including updated row, in cell, popup editing rules and more   

See the React Grid Printing demo