---
layout: layout.html
title: UI Components
---

<h1>UI Components</h1>
<p>
  These are the components available in the dile-components catalog, categorized by type.
</p>

<div class="Clasification">
  {% for tag in componentTagsList %}        
    <dile-card 
     title="{{ tag | capitalize }}" 
    >
      <dile-selector>
        {% for component in collections[tag] %}
          {% include "layout-partials/nav-item.html" %}
        {% endfor %}
  
      </dile-selector>
    </dile-card>
  {% endfor %}

  {% if collections.uncategorizedComponents.size > 0 %}
    <dile-card 
     title="Other components" 
    >
      {% for component in collections.uncategorizedComponents %}
        {% include "layout-partials/nav-item.html" %}
      {% endfor %}
    </dile-card>
  {% endif %}
</div>

<h2>CRUD Components</h2>

<p>
In addition to the user interface components listed earlier, we have another package with <a href="/crud/">components that enable the
creation of a complete CRUD system</a>.
<p>

</p>
The CRUD components are designed to adapt to most web services in a generic way, saving a lot of tedious work when
building administration panels.
</p>