Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Updating the UI Kit in your application

Updated on February 7, 2022

Ensure that your application includes a modern, responsive, and consistent UI by updating the out-of-the-box UI Kit layer in your application stack.

UI Kit provides a ready-made application interface that reflects the latest design trends and Pega Platform capabilities. When you create a Classic application, the latest version of UI Kit is included in the application stack.

When you upgrade to a newer version of Pega Platform, you can update the UI Kit layer version or keep your previous version. However, if you do not update UI Kit to the latest available version, certain out-of-the-box functionalities might not work as intended.

Note: Updates to later UI Kit versions might require development effort. For example, after an update, the styling or behavior of your application might change, which requires you to refactor and modify some of your custom CSS and sections from your current UI Kit to be in sync with the updated UI Kit.
  1. In the header of Dev Studio, click the name of the application, and then click Definition.

  2. In the Built on applications section, click Add application.

  3. In the new row, enter UIKit, and then select the latest version by pressing the Down arrow key.

  4. Next to the previous version of UI Kit, click the Delete icon.

  5. Click Save.

  • Skins

    Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.

  • Updating the Cosmos theme in your application

    Build your application by using the latest UI tools. By ensuring that the Cosmos theme ruleset is up to date, you provide your application with a modern and responsive interface.

  • Managing Cosmos UI settings in case designer

    Adjust the Cosmos-based user interface of your application to the needs of your organization. By changing Cosmos settings, you can control case-level fields and case behavior to make the interface cleaner or more informative, according to your preferences.

  • CSS helper classes

    CSS helper classes are snippets of code that introduce minor formatting changes to your UI. If your application has many formats of the same type, and these formats vary only slightly, using CSS helper classes can save you development time by limiting the number of customized skin formats.

  • Uploading custom font files

    Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.

  • Login screen customization

    You can customize the appearance of the login screen and other screens that unauthenticated users access, to maintain design consistency with your company's style guidelines.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us