Personal Portfolio Sample Application

The Personal Portfolio sample app showcases KendoReact UI components, including a Data Grid, Drawer, Inputs, Gauge, Dropdowns, Icons, Chart, ExpansionPanel, Form, Buttons, Card, and CSS utility classes from the Progress Design System.

ninja-iconThe Personal Portfolio Sample App was created with KendoReact, an enterprise-grade UI library with 120+ free and premium components. To try out the premium components used in this app, you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.Start Free Trial

How to Run the Demo

Whether you are looking for examples how to use KendoReact in applications, or for a starting point for your own online shops, head over to the live Personal Portfolio Application. You can find the Vite application's source code on GitHub.

To play with the demo and see how it’s built, you may want to run it locally:

  1. Clone or download the source code from GitHub.
  2. Install the required dependencies via npm install.
  3. Make sure you have activated your license.
  4. Use npm run build (for production usage) or npm run dev command to start a dev server.
  5. Follow the console instructions to view the Personal Finance app.

About the App

This application was built following best practices for using KendoReact components, maintaining a clean structure that makes it an excellent learning resource. You can explore how to set up complex components such as the Data Grid (Table), Charts, Inputs, Dropdowns, and Forms.

Styling KendoReact Components with Ease

To make styling as easy as possible, you can use the KendoReact Themes that come out-of-the-box with this React UI components library. In this demo, we use the KendoReact Default Theme to make our components stand out and look great.

For more information on how to add one of the themes to your project, refer to the article on using the KendoReact themes in React projects.

If you're interested in applying more styling, How to Add Custom Styles to KendoReact Components with Sass is another helpful resource.

Easier Collaboration with Your Designers

To enable a smooth and trouble-free collaboration between designers and developers, the Progress Design kit offers several UI Kits for Figma. These kits supply your designers with assets that match the KendoReact UI components at your disposal. Matching building blocks on both sides - design and development - guarantee the smooth implementation of the design.