This is a submission for the KendoReact Free Components Challenge.

This is a simple color palette generator built with React and TypeScript, using free components from the KendoReact library.

It allows users to generate a random color palette with a customizable number of colors (1–10) and copy the hex codes of individual colors to the clipboard.

What I Built:

I created a Color Palette Generator that leverages the power of KendoReact’s free components to provide an interactive and visually appealing experience.

Users can specify the number of colors they want in their palette (between 1 and 10), generate a random set of colors with a single button click, and copy individual color hex codes to their clipboard by clicking on the displayed color chips.

The app features smooth fade animations for a polished feel and tooltips to guide user interactions.

Features:

  • Generate Random Palettes: Create a new palette with a specified number of colors.
  • Customizable Size: Choose between 1 and 10 colors using a numeric input.
  • Copy to Clipboard: Click on any color chip to copy its hex code.
  • Animated Display: Colors fade in when generated, enhancing the user experience.
  • KendoReact Components: Built entirely with free KendoReact components for a polished UI.

Demo :

  • Code Repository: Code

KendoReact Experience 💥

I leveraged KendoReact’s free components to build a seamless and professional-looking UI with minimal effort.

The Button component provided a clean trigger for generating palettes, while the Chip component was perfect for displaying colors with their hex codes—its built-in styling saved me time on custom CSS.

The NumericTextBox made it easy to restrict input to a valid range (1–10), and the Tooltip added an intuitive hint for copying colors.

The Animation component brought the app to life with fade effects, and Typography ensured consistent text styling. The default theme (@progress/kendo-theme-default) tied everything together with a cohesive look out of the box.

Working with KendoReact was a breeze—the components were well-documented, TypeScript-friendly, and highly customizable, even in their free tier. It allowed me to focus on functionality rather than wrestling with UI design.

KendoReact Components Used

This project leverages the following free KendoReact components:

  • Button (@progress/kendo-react-buttons): Triggers palette generation.
  • Chip (@progress/kendo-react-buttons): Displays each color in the palette.
  • NumericTextBox (@progress/kendo-react-inputs): Allows users to input the number of colors.
  • Tooltip (@progress/kendo-react-tooltip): Provides a hint for copying colors.
  • Animation (@progress/kendo-react-animation): Adds a fade animation to the palette display.
  • Typography (@progress/kendo-react-common): Styles the heading and instructions.
  • @progress/kendo-theme-default: Applies the default theme for consistent styling.

Delightfully Designed

While I didn’t use the KendoUI Figma Kits or Progress ThemeBuilder directly in this project, the default KendoReact theme (@progress/kendo-theme-default) provided a solid design foundation. I relied on the pre-built styles of the components to maintain a clean, modern look.

For example, the Chip components automatically adapted their appearance based on the background color, and the Tooltip positioning worked flawlessly without additional tweaking.

If I were to extend this project, I’d use the ThemeBuilder to customize the color scheme further—perhaps to match the generated palettes dynamically.

(This was a solo project, so no teammates to credit.)

License :

This project is free to use and modify, leveraging the free offerings of KendoReact.

Use and Customize it as you want . Write down your thought below .