CoralUI is a library of web components for creating beautiful experiences. Most components in CoralUI are JavaScript components, which offer more functionality and are often more complex.

It is a set of CSS and JS files designed and built for Adobe Cloud products. Coral UI provides a wide range of html components pre-developed for your website like buttons, navigation bar, tool bar-tables, grid, dialogs etc. which saves your time from developing these components.

Example of Coral UI as Javascript component:

• Components/functionalities like accordion/tabs which we usually/previously would have done using HTML markup with some jQuery plugins to bring out the final outcome as accordion/tabs.
• In Coral UI, the same is exposed to us via tags named , and other related tags for a particular feature.

Example of Coral UI as CSS-only component:

• Dialog fields which are in the form of HTML input tag (say pathbrowser/pathfield), has classes named coral-InputGroup, coral-InputGroup-input(targeting input tag), coral-InputGroup-button(targeting the button with icon -> click of which lets us select a path) which has attributes contributing to the look and feel of the field.

Advantages of Coral UI

• Modular :- All the components are developed as modules,that can be used individually, allowing you to use just what you want.
• Icons:- Coral UI prvides a wide range of icons to choose from and are fully customizable according to customer need. It provides around 400+ icons to choose from.
• Open Development:- It is an open development project means it allows every one inside adobe to contribute.
• XD Approved:- All the designs and components are XD approved.

Example:

Create checkbox group using coral UI in Adobe Experience Manager

Picture: Checkbox Image

Following is code to create checkbox which is shown in picture.

References: Read more at AEMCQ5Tutorials: Create Touch UI Component Using Coral UI AEM

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.ButtonGroup.html

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/getting-started.html