How is your experience with the OutSystems Community?
outsystems-ui
Reactive icon

OutSystems UI

Supported
Stable version 3.0.0 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded
 on 9 Nov (3 days ago)
 by 
OutSystems
4.6
 (139 ratings)
outsystems-ui

OutSystems UI

Details
The OutSystems UI framework for Reactive Web and Mobile apps, with more than 70 responsive UI patterns.
Read more

What’s new in 3.0

A new default theme built on OutSystems Design Tokens, with a refreshed visual design and Inter typography.

  • Design tokens: change a value once, like the primary color or border radius, and it applies across the whole library
  • Component CSS API: override documented properties per component or per instance, instead of the framework’s internal styles
  • Dark mode, with the SetDarkMode client action to switch at runtime
  • New documentation in Storybook

Existing apps keep the Classic theme after upgrading and can move to the new theme when ready.


Key features:

More than 70 UI patterns

  • Customizable design system built on design tokens
  • Light and dark themes
  • Responsive UI
  • Right-to-left support
  • Accessibility compliance with WCAG 2.2
  • Built for Reactive Web and Mobile apps


Find out more at https://outsystems-ui.outsystems.com

Release notes (3.0.0)

New Features

  • New Default Theme: Introduced a new default theme for OutSystems UI, built on a design token system that centralizes colors, typography, spacing, and shapes. Instead of each component carrying its own hardcoded styling, every pattern and widget now resolves its appearance from a shared set of tokens, so the look of an application can be adjusted centrally and stays consistent across the component set. These are the same design tokens used by Mobile UI, so web and mobile applications share a single styling foundation. The previous theme was renamed to OutSystems UI Classic and remains fully available, and existing applications keep the theme they already use.
    • Dark Mode: Introduced a dark mode. Component text and surface colors are driven by paired light and dark tokens, so every component keeps the correct contrast when the dark mode is active. A new SetDarkTheme client action, available under Utilities, enables or disables the dark mode at runtime, for scenarios such as a dark and light theme toggle, by applying or removing the dark mode class on the document root, so the theme changes across components without requiring a page reload. It receives an IsDark boolean input and returns Success and ErrorMessage, consistent with the other client actions. (ROU-13004)
    • Typography: Inter is the default font family of the new theme, replacing Roboto. (ROU-13005)
    • Dynamic Font Support: Dynamic fonts are supported by default. All default font-size and line-height variables react to the base font size defined on the HTML element, so applications follow the font scaling preferences set by the user. (ROU-12959)
    • Accessibility: Focus states are standardized across all patterns and widgets through a shared focus mixin and global CSS variables, replacing the individual focus styles each component defined before.
    • New component defaults: Alerts use the Light (subtle) styling and form controls use the Soft shape by default, each with utility classes available to apply the alternative looks: bold for Alerts, rectangular and round for form controls.
    • Table on mobile and tablet: The Table widget keeps its table layout with horizontal scroll on every device, instead of changing its appearance on smaller screens, which improves row readability. (ROU-13056)


Improvements & Changes

  • Video:
    • Base64 Sources: Improved the Video component to support Data URIs (data:content/type;base64) as valid source URLs. This allows video streams to be embedded directly as data URLs without specifying a MIME type on the source tag, although large video payloads should still be used with caution due to the increased memory footprint. (ROU-11717)
    • Sources Without a File Extension: Improved the Video component to support source URLs without a file extension. This ensures video playback works as expected as long as the endpoint returns a valid video stream, regardless of the URL structure. (ROU-13023)
  • iPhone Dimensions: Added support for the latest iPhone models (iPhone 16e, iPhone 17e, and the iPhone 18 series) by updating the associated dimensions applied through the iphonex CSS class. (ROU-13081)
  • Library Providers:
    • Floating UI: Updated the DropdownServerSide, Tooltip, and OverflowMenu components to Floating UI Core and Floating UI DOM v1.8.0. (ROU-13088)
    • Smooth Scroll Polyfill: Updated the SectionIndex component to smoothscroll-polyfill v0.4.4. (ROU-13087)
    • Deprecated components: Updated DEPRECATED_DatePicker component to Moment.js v2.31.0 ; DEPRECATED_ProgressCircle and DEPRECATED_ProgressCircleFraction components to ProgressBar.js v1.1.1 ; DEPRECATED_SectionIndex component to smoothscroll-polyfill v0.4.4. (ROU-13087)


Bug Fixes

  • Datepicker:
    • Fails to Open on Android: Fixed an issue that caused the DatePicker component to fail to open. This occurred specifically on Android devices running Chrome version 154 or higher. (ROU-13095 / RPM-7277)
    • Intermittent Failure to Open in Native Apps: Fixed an issue that caused the Datepicker component to fail to open intermittently. This occurred on certain Android devices and OS versions. (ROU-13122 / RPM-7313)
    • Flickering on Runtime Property Updates: Fixed an issue that caused the Datepicker component to flicker. This occurred when a property was updated at runtime, causing the underlying input element to be unnecessarily recreated. (ROU-13147 / RPM-7319)
  • Dropdown Search & Dropdown Tags: Adding Options to an Empty List: Fixed an issue that prevented users from adding a new option to the Dropdown Search and Dropdown Tags components. This occurred when the options list was empty while using the allowNewOption extensibility property configured through the SetVirtualSelectConfigs client action. (ROU-13034)
  • Lightbox - Blocked Page Inside Carousel: Fixed an issue that caused the Lightbox component to misbehave and block the page. This occurred when the Lightbox was used inside a Carousel component with the Loop property enabled. (ROU-13067)


Breaking Change

  • URL.IsValid Removed: Removed the deprecated OSFramework.OSUI.Helper.URL.IsValid JavaScript function, which was affected by a potential ReDoS (catastrophic backtracking) vulnerability. Use the native URL constructor instead. (ROU-13054 / RPM-7202)
License (3.0.0)
Reviews (31)
by 
24 Jun
in version 2.28.1
Awesome work.
by 
2025-06-13
in version 2.23.0
Works perfectly.
by 
2025-05-28
in version 2.23.0
Excellent work on this release. I truly value the focus on accessibility and functionality enhancements. it is really helpful.
Team
OutSystems
Other assets in this category