Match prebuilt components to your unique design requirements with Progress ThemeBuilder—now offering AI-powered theme generation.
Building modern web applications benefits from robust UI components that deliver both functionality and visual appeal. Telerik and Kendo UI provide component libraries that accelerate development with prebuilt, feature-rich elements, from basic React buttons and Angular inputs to advanced Blazor data grids, .NET MAUI charts and Vue schedulers. These libraries offer developers everything they need to create professional applications without having to start their UI development from scratch.
However, out-of-the-box components sometimes don’t match your specific design requirements. Every application has unique branding, color schemes, typography and visual styles that need to be applied consistently across all components. This is where Progress ThemeBuilder comes in as a visual styling tool that bridges the gap between powerful component libraries and custom design requirements.
Now, with the introduction of AI-powered theme generation, ThemeBuilder takes customization to the next level. Instead of manually adjusting individual properties and variables, you can describe your desired theme in natural language and watch as AI generates a complete, cohesive design system that brings your vision to life!
Progress ThemeBuilder is a comprehensive visual styling tool designed specifically for customizing Telerik and Kendo UI components. Rather than wrestling with complex CSS rules or digging through component documentation to find the right styling properties, ThemeBuilder provides an intuitive interface where you can see your changes applied in real time.
The tool serves as a hub for all your UI customization needs, offering:
Whether you’re working solo on a small project or collaborating with a large team on a complex design system, ThemeBuilder streamlines the entire styling workflow. Instead of context-switching between design tools, code editors and browser developer tools, everything happens in one cohesive environment.
The latest addition to ThemeBuilder introduces something that would have seemed like science fiction just a few years ago: the ability to generate complete, cohesive themes using nothing more than natural language descriptions!
The Create with AI capability transforms the theme creation process from a technical exercise into a creative conversation. Instead of manually adjusting dozens of variables and properties, you can now describe your vision in plain English and watch as ThemeBuilder generates a complete theme that matches your requirements.
Imagine we were interested in creating a retro gaming theme for a digital entertainment brand. In the prompt panel, we might enter: “Create a vibrant retro gaming theme inspired by 80s arcade aesthetics with neon colors and bold contrasts that evoke classic video game nostalgia.”
After clicking Generate Theme, ThemeBuilder’s AI analyzes this description and produces a striking design system with a dark background complemented by bright neon green borders and text punctuated by electric magenta accent elements. This creates that authentic retro arcade atmosphere across all components, from buttons and inputs to complex data interfaces.
Or consider a minimalist wellness theme for a healthcare application. We could prompt: “Design a calming, minimalist theme using soft earth tones that promotes tranquility and trust for a meditation app.” The AI responds by generating a cohesive palette of warm beiges and rich browns, creating a soothing, organic feel.
For something completely different, we might create a luxury financial theme for a fintech startup: “Build an elegant, premium theme with deep navy blues and gold accents that conveys trust and exclusivity for high-end financial services.” The resulting theme features a more sophisticated deep navy background complemented by striking gold accents that appear throughout navigation elements, buttons, icons and interactive components.
The AI understands not just individual design choices but how they work together as a system. When you describe wanting a “retro gaming” aesthetic, it doesn’t just apply neon colors randomly; it creates a cohesive design language that considers how those vibrant hues work across different component states, how the pixelated styling affects borders and spacing, and how the bold contrasts enhance usability while maintaining the thematic consistency.
This capability is compelling for developers who may not have extensive design backgrounds but need to create professional-looking themes. Rather than spending hours learning design principles or struggling with color theory, you can focus on describing the experience you want to make and let the AI handle the technical implementation.
Additionally, AI-generated themes serve as an excellent foundation for further customization. While the AI provides a strong starting point with cohesive colors, spacing and component styling, you can then dive into ThemeBuilder’s advanced editing capabilities to fine-tune specific elements. You may want to adjust the exact shade of a primary color, modify the border radius on buttons or tweak the spacing between elements.
The AI gives you a professionally designed baseline that eliminates the blank canvas problem, allowing you to focus your time and creativity on the specific details that matter most to your project.
For AI theme generation, ThemeBuilder provides some advanced settings that give you additional control over the generation process, allowing you to fine-tune how creative and experimental you want the AI to be.
The Creativeness slider controls how bold and experimental the AI should be when interpreting your prompts, operating on a spectrum of Ordinary (conservative, well-established patterns perfect for professional applications), Moderate (balanced approach ideal for most business applications) and High (unleashes full creative potential with bold choices perfect for brands wanting to stand out).
The Color Mode setting allows you to specify whether the AI should generate a light theme or dark theme, so the generated theme aligns with your application’s intended usage patterns and user preferences.
These advanced settings work in harmony with your text prompts to give you precise control over the theme-generation process. A prompt for a “banking application” with creativeness set to “Ordinary” and “Light” mode will yield very different results than the same prompt with creativeness set to “High” and “Dark” mode, giving you the flexibility to explore other creative directions for the same concept.
AI-powered theme generation in ThemeBuilder transforms theme creation from a technical exercise into a simple conversation. Describe your vision in plain English, whether it’s a retro gaming interface, wellness application or financial platform, and receive a complete, professional theme as your starting point.
Ready to try it? Explore ThemeBuilder and bring your design vision to life with a simple prompt!
Hassan is a senior frontend engineer and has helped build large production applications at-scale at organizations like Doordash, Instacart and Shopify. Hassan is also a published author and course instructor where he’s helped thousands of students learn in-depth frontend engineering skills like React, Vue, TypeScript, and GraphQL.