Hi Components

Hi Components List

More than 100 components.

Hi Actions Container

Display large amounts of content with the possibility to include actions in it.

Reactive

Hi Actions Container Traditional

Display large amounts of content with the possibility to include actions in it.

Traditional

Hi Advanced File Upload

Component used to insert or drag and drop a file.

Reactive

Hi Advanced Info Overlay

Full card overlay for additional content on the entire card.

Reactive

Hi Advanced Search

Allow the user to use multiple types of search inputs.

Reactive

Hi Advanced Search Traditional

Allow the user to use multiple types of search inputs.

Traditional

Hi Advanced Timeline

Have a timeline displayed vertically and with several options to show in how to have content displayed or hidden.

Reactive

Hi Arc Chart

Use a list of arc-chart type to create a chart.

Traditional

Hi Auto Resize Text Area

Component to make the Text Area to expand when content is added.

Reactive

Hi Auto Resize Text Area Traditional

Component to make the Text Area expand when content is added.

Traditional

Hi Body Class

Component to insert classes on the html body (Add, Remove and Toggle actions).

Reactive

Hi Bulk Select

Component that allows the user to select/unselect all checkboxes inside a Table Records widget.

Traditional

Hi Button Option

Display one or more options inside a button.

Reactive

Hi Card Center Row Content

Show content in the center row, plus the choice of having other content or actions in the left and/or right side of the card.

Traditional

Hi Card Swiper

Component with a slideshow card swiper and 3D effect.

Reactive

Hi Card With Progress

Have a card with different text placeholders and a progress bar.

Reactive

Hi Circular Slider

Create a circular slider by giving a list of items and an initial value for the slider.

Traditional

Hi Color Preview

Component with a container that changes its background with the color set in the input.

Reactive

Hi Color Preview Traditional

Component with a container that changes its background with the color set in the input.

Traditional

Hi Confetti

Component to drop confetti on your screen.

Reactive

Hi Confirmation Delete

Have a confirmation step that can be used to verify danger actions, like delete or other type of exclude data.

Reactive

Hi Confirmation Delete Traditional

Have a confirmation step that can be used to verify danger actions, like delete or other type of exclude data.

Traditional

Hi Content Flow Steps

Use this component to display information steps on wizard, like flows.

Traditional

Hi Copy to Clipboard

Component used to copy text to clipboard.

Reactive

Hi Country Code

Have a dropdown with a flag image and international country code to be selected.

Traditional

Hi Credit Card

Show a card with information such as the number or name of the holder and have the option to change the card's background image.

Reactive

Hi Credit Card Traditional

Show a card with information such as the number or name of the holder and have the option to change the card's background image.

Traditional

Hi Cupertino Pane

Slide-over pane with touch technologies.

Reactive

Hi Custom Button Loading

Button with loading state.

Reactive

Hi Custom Dropdown Search

Enhanced dropdown block, with search functionality.

Reactive

Hi Custom Popover

Display additional content on user selection.

Reactive

Hi Custom Section Index

Show hierarchy to enable the users to navigate within a page quickly.

Reactive

Hi Dropdown Search Inline

Display a dropdown with a search functionality.

Reactive

Hi Element Scroll

Structure used to display a popup having a title, content, a secondary content (for example, a checkbox) and actions.

Traditional

Hi Error Screen

Use this component to display the type of an error.

Reactive

Hi Error Screen Traditional

Use this component to display the type of an error.

Traditional

Hi Expandable Content Table Row

Use this pattern inside a row to expand and collapse a row between with content.

Reactive

Hi Flex

The Flexible Box Layout Module makes it easier to display flexible and responsive elements without using float or positioning.

Reactive

Hi Font Awesome Free

Component to preview and insert the attributes of Font Awesome Free icons.

Reactive

Hi Font Awesome Icon

Component to insert a Font Awesome icon.

Reactive

Hi Font Awesome Icon Traditional

Component to insert a Font Awesome icon in Traditional applications.

Traditional

Hi Full Page Overlay

Full page overlay for additional content on the entire screen.

Reactive

Hi Full Page Overlay Traditional

Full page overlay for additional content on the entire screen.

Traditional

Hi HTML Editor

Next generation block styled editor.

Reactive

Hi Icon SVG

Display and create SVG icons from HTML tags.

Reactive

Hi Iframe

Display the content of an URL.

Reactive

Hi Image Background

Have a banner with custom content. Areas without content or having images without background will have a filled background with a color of your choice.

Reactive

Hi Image Cropper

Component that gives the user a selection of image cropping possibilities.

Reactive

Hi Increment Input

Input with actions to change the numeric value (- 1), (+ 1) or in a different interval.

Reactive

Hi Increment Input Traditional

Input with actions to change the numeric value (- 1), (+ 1) or in a different interval.

Traditional

Hi Input Code

Have a styled input that can force number or password type.

Reactive

Hi Input Code Traditional

Styled input number type.

Traditional

Hi Input Color

Have an input color type, where the user can insert different color type codes.

Reactive

Hi Input Color Traditional

Have an input color type, where the user can insert different color type codes.

Traditional

Hi Input Label

Display a label and its widget.

Reactive

Hi Input Label Traditional

Display a label and its widget.

Traditional

Hi Input Mask Currency

Apply a mask on currency input fields.

Reactive

Hi Input Month/Year Mask

Applies a mask to the input with a format MM/YYYY.

Reactive

Hi Input Month/Year Mask Traditional

Applies a mask to input with a format MM/YYYY.

Traditional

Hi Input Progress

Component to display an input progress regarding its expected value length.

Reactive

Hi Loading Animation

Component to display a loading state.

Reactive

Hi Loading Animation Traditional

Component to display a loading state.

Traditional

Hi Loading For Splash Screen

Component used to do the splash screen during the loading for the start or open of the application.

Reactive

Hi Masonry Gallery

Have images displayed in a masonry like pattern.

Reactive

Hi Multi Select Dropdown

Have a dropdown with a multiple choices selection from several options.

Reactive

Hi Multi Select Dropdown Traditional

Have a dropdown with a multiple choices selection from several options.

Traditional

Hi Multiple Detail Card

Use it to display different information type in a card with several content areas.

Reactive

Hi Native Range Slider

Component with the <input type="range"> that defines a control for entering a number whose exact value is not important (like a slider control).

Reactive

Hi Notifications Popover

Have a popover to display notifications.

Reactive

Hi Offset Menu

Component to add a different menu to your app.

Reactive

Hi Opacity Effect

Component to add a opacity effect to all its content.

Reactive

Hi Opacity Effect Traditional

Component to add a opacity effect to all its content.

Traditional

Hi Pagination Show Items

Component to help users to find a specific listed item by having a different number of items per page choice to select.

Reactive

Hi Parallax Mouse

Component that allows to add items that move at a different speed depending on the mouse movement.

Reactive

Hi Parallax Scroll

Component that allows to add items that move at a different speed depending on the scroll.

Reactive

Hi Popover Filter Traditional

Component having a popover that can be used to display a filter triggered by clicking on a button included in the component.

Traditional

Hi Popup Structure

Component to display a popup having a title, a secondary content (like for example, a checkbox) and an actions area at the bottom.

Reactive

Hi Progress Scroll

A minimalist page scroll indicator to visualize the scroll position (how much the user has scrolled) in a slim progress bar. Fully customizable via CSS.

Reactive

Hi QR Coder

A simple QR Code generator to your application.

Reactive

Hi Remove Tag

Use it to select and remove tags.

Reactive

Hi Responsive Breadcrumbs

Display the current user location in applications with a deep page hierarchy.

Reactive

Hi Responsive Breadcrumbs Traditional

Display the current user location in applications with a deep page hierarchy.

Traditional

Hi Ring Progress

Component to display an element surrounded by a ring with a progress.

Reactive

Hi Ring Progress Traditional

Component to display an element surrounded by a ring with a progress.

Traditional

Hi Section Actions

Component that can separate content and have actions included on it (for example, add, edit or delete).

Reactive

Hi Section Content Expandable

Useful component to organize information by displaying part of the content first and then expand it to see more.

Reactive

Hi Select Card

Component that allows the user to select cards between multiple options.

Reactive

Hi Select Card Traditional

Component that allows the user to select cards between multiple options.

Traditional

Hi Select Option Group

Use it in a dropdown so you can select an option having those options separated by groups.

Reactive

Hi Select Option Group Traditional

Use it in a dropdown so you can select an option having those options separated by groups.

Traditional

Hi Select Tag

Component to select multiple options displayed as tag elements.

Traditional

Hi Side Actions

Display an action that gives access to a set of additional actions.

Reactive

Hi Simple Pagination

Component used to display the pagination in a different layout for its options and results.

Reactive

Hi Sticky Content

Component to have a sticky top, bottom, left or right area on your screen used to add items and with the possibility to compare them.

Reactive

Hi Sticky Content Traditional

Component to have a sticky top, bottom, left or right area on your screen used to add items and with the possibility to compare them.

Reactive

Hi Table Edit Inline

Component to add or edit inline elements.

Reactive

Hi Table Row Expandable

Component that allows user to create and display expandable content inside the table.

Reactive

Hi Table Row Expandable Traditional

Component that allows the user to create and display expandable content inside the table.

Traditional

Hi Timer Carousel

Have a carousel with multiple items and a visible timer in an horizontal slide.

Reactive

Hi Title Line Separator

Use this to show a text with separator, so it helps you to organise and structure better your content.

Reactive

UI Components

for Outsystems Platform

for Outsystems

Platform

Why UI components?

For Outsystems

Platform.

Extended Outsystems

UI Framework.

Solutions for desktop

and mobile applications.

What the community says about

Design System

What the comunity say about design system

Hi Components List

Hi Actions Container

Hi Actions Container Traditional

Hi Advanced File Upload

Hi Advanced Info Overlay

Hi Advanced Search

Hi Advanced Search Traditional

Hi Advanced Timeline

Hi Arc Chart

Hi Auto Resize Text Area

Hi Auto Resize Text Area Traditional

Hi Body Class

Hi Bulk Select

Hi Button Option

Hi Card Center Row Content

Hi Card Swiper

Hi Card With Progress

Hi Circular Slider

Hi Color Preview

Hi Color Preview Traditional

Hi Confetti

Hi Confirmation Delete

Hi Confirmation Delete Traditional

Hi Content Flow Steps

Hi Copy to Clipboard

Hi Country Code

Hi Credit Card

Hi Credit Card Traditional

Hi Cupertino Pane

Hi Custom Button Loading

Hi Custom Dropdown Search

Hi Custom Popover

Hi Custom Section Index

Hi Dropdown Search Inline

Hi Element Scroll

Hi Error Screen

Hi Error Screen Traditional

Hi Expandable Content Table Row

Hi Flex

Hi Font Awesome Free

Hi Font Awesome Icon

Hi Font Awesome Icon Traditional

Hi Full Page Overlay

Hi Full Page Overlay Traditional

Hi HTML Editor

Hi Icon SVG

Hi Iframe

Hi Image Background

Hi Image Cropper

Hi Increment Input

Hi Increment Input Traditional

Hi Input Code

Hi Input Code Traditional

Hi Input Color

Hi Input Color Traditional

Hi Input Label

Hi Input Label Traditional

Hi Input Mask Currency

Hi Input Month/Year Mask

Hi Input Month/Year Mask Traditional

Hi Input Progress

Hi Loading Animation

Hi Loading Animation Traditional

Hi Loading For Splash Screen

Hi Masonry Gallery

Hi Multi Select Dropdown