OutSystems UI

Stable Version 2.5.8 (O11)
Also available for 10
Published on 25 Aug by 
Created on 28 June 2016
What’s new (2.5.8)

New pattern:

  • InlineSVG - use this pattern to render custom SVG markup in you screens. This way it's possible to change the fill and stroke properties, or to animate the SVG paths.


  • Fixed issue on Pagination pattern relative with list virtualization of each element rendered.
  • The padding-none class now works when used on CardBackground's ExtendedClass parameter.
  • Fixed the Animated Label's behavior when its value is empty
  • Fixed the value of aria-hidden of AccordionItem when the content is open/closed.
  • Fixed the Accordion Item arrow's animation axis.
  • Fixed the scroll position when navigating between screens using the browser's back button.
  • Fixed an issue that prevented users from using the optional parameter URL to preview images with the LightboxImage pattern.


  • The carousel now sets 3 new CSS Variables on the body of the page to allow custom CSS animations:
    • .var(--{carousel.id}-width)
    • . var(--{carousel.id}-position)
    • . var(--{carousel.id}-items)
    • The name is dynamic, using the caruosel.id, to allow multiple carousel animations on the same screen.
    • You can see an example on how to use this, in the new Onboarding With Animation Screen Template.
  • Now it's possible to set full-width on the Sidebar pattern using the full-width utility class on the ExtendedClass parameter.
  • New CSS utility classes available:
    • position-relative: apply relative position to elements.
    • position-absolute: apply absolute position to elements.
    • absolute-[top,top-right,top-left, bottom, bottom-right, bottom-left, center, center-top, center-right, center-bottom,center-left]: set the element position in all sides. The CSS classes were added independently for each position. 
    • border-[top, bottom, left, right]: add border lines to elements or using into columns, the border will apply only to each column item. The CSS classes was added independently for each side. 
    • border-radius-[top, bottom, left, right]-soft: modify the border-radius of an element. The CSS classes was added independently for each corner and for each side. 
    • flex-direction-column-reverse: reverse the order of elements.
    • align-items-initial: useful to reset the flex alignment of patterns, using flexbox. 
    • align-items-flex-end: align content with text,using flexbox.
    • align-items-baseline: align content with element's bottom, using flexbox.
    • remove-card-gradient: remove the card background gradient, using the ExtendedClass parameter.
    • scale-up: animation style to scale up elements.
    • break-word: break text inside elements.
The OutSystems UI framework for Reactive Web and Mobile apps with dozens of responsive UI patterns on top of a solid design system, fully customizable to your Style Guide needs.
Read More

With dozens of responsive UI patterns, this framework is integrated with OutSystems and allows you to build the UI of your app using low code. 

Key features:

  • More than 70 UI patterns
  • Easily customizable and extendable design system
  • Responsive UI
  • Right-to-left support
  • Accessibility compliance with WCAG 2.1
  • Actions to deal with different device types
  • Built for Reactive Web and Mobile apps 

Find out more at www.outsystems.com/outsystems-ui

Reviews (7)
9 Feb
in version 2.3.2
Best guided app development system for android web-based app
23 Jan
in version 2.3.0
As a designer I am constantly frustrated by the disappearing of component examples I have been using in my designs and the lack of working examples of components. Reading documentation about components doesn't help me. I need to interact with components and be able to share them with others to interact with. The Sketch file of UI components is months out of date. Not a very designer-friendly site.
in version 2.2.5
Really useful!
Tons of new great components, with the usual quality.
UI & Widgets, Libraries, Components, Themes
Support Options
OutSystems Supported
Customers entitled to Support Services may obtain assistance through Support.
OutSystems UI has no dependencies.
Component Consumers
See all 15 consumers
Weekly Downloads