How to use coral ui in making simple form component ?



I have started with Coral UI and have gone through its documentation. However, I am unable to find the starting point.

I have also tried making custom component and pasting coral UI markups given in documentation. Its not showing up properly. For example, I have used following code in my custom component html script:

<table class="coral-Table coral-Table--hover">

  <thead class="coral-Table-Head">

    <tr class="coral-Table-row">

        <th class="coral-Table-headerCell">FirstName</th>

            <th class="coral-Table-headerCell">LastName</th>

            <th class="coral-Table-headerCell">PhoneNo</th>



    <tbody class="coral-Table-body">

    <tr class="coral-Table-row">

        <td class="coral-Table-cell">Rishabh</td>

            <td class="coral-Table-cell">Krishan</td>

            <td class="coral-Table-cell">9454117031</td>


        <tr class="coral-Table-row">

        <td class="coral-Table-cell">Krishna</td>

            <td class="coral-Table-cell">Kumar</td>

            <td class="coral-Table-cell">9545675429</td>




only table is displayed but no hovering. Please Help.

Accepted Solutions (0)

Answers (5)

Answers (5)





Rishabh Coral/Granite framework is created for AEM UI. In case if you want to create an utility page/landing page then you can use those frameworks but for your own website or customer facing, it is not recommended.

The reason for not working coral UI in custom components is, the supporting JS/CSS won't be available or loaded.



Coral API is not meant to go into Production. Its meant for Author and to build out component dialogs or AEM UI.  So Coral API is not meant to build a custom component that is rendered in an AEM web page.