---
layout: layout.html
---

<h1 class="homeh1">Polydile Web Components</h1>
  <div class="subtitle">
    <div class="image">
      <img src="images/design-components.svg" alt="Design components">
    </div>
    <section>
      <p>
        Custom elements made for all kind of projects and frameworks.
      </p>
      <div class="options">
        <a href="how-to-use"><dile-button>How to use</dile-button></a>
        <a href="components/"><dile-button>Components catalog</dile-button></a>
      </div>
    </section>
  </div>
  
  <div class="Featured">
    <a href="/how-to-use">
      <div class="Featured-item">
              
        <dile-icon-name icon="settings"></dile-icon-name>

        <h2>Use everywhere</h2>
        <p>
          It's Javascript Web Components, you can use in Vanilla.js or any framework you want.
        </p>
      </div>
    </a>
    <a href="/how-to-use">
      <div class="Featured-item">

        <dile-icon-name icon="palette"></dile-icon-name>

        <h2>Customizable</h2>
        <p>
          Every component has a base design and they are also fully customizable.
        </p>
      </div>
    </a>
    <a href="/how-to-use">
      <div class="Featured-item">

        <dile-icon-name icon="scale"></dile-icon-name>

        <h2>Lightweight</h2>
        <p>
          Only a few Kb per component! Always lightweight, for optimized projects.
        </p>
      </div>
    </a>
    <a href="/components/">
      <div class="Featured-item">
        <dile-icon-name icon="checkboxChecked"></dile-icon-name>

        <h2>Multiple purposes</h2>
        <p>
          Components for common (and no so common) purposes. You can use only one... or all of them.
        </p>
      </div>
    </a>
    <a href="/mixins/">
      <div class="Featured-item">
        <dile-icon-name icon="autoAwesome"></dile-icon-name>

        <h2>Generic mixins</h2>
        <p>
          There are components, but also mixins for many generic case to develop user interfaces.
        </p>
      </div>
    </a>
    <a href="/contribute">
      <div class="Featured-item">
        
        <dile-icon-name icon="help"></dile-icon-name>

        <h2>Easy to understand</h2>
        <p>
          The components are easy to understand for every developer, so you can expand and contribute with us.
        </p>
      </div>
    </a>
  </div>
  <div class="moreinfo">
    <h2>Quick start</h2>
    
    <p>To use the Dile Components catalog, you need to install the package containing the component you want to use. You can find the installation command on the component’s documentation page. For example:</p>
    <pre><code class="language-bash">npm install @dile/ui
    </code></pre>
    <blockquote>
    <p>The <code>@dile/ui</code> package is the main package containing the User Interface components. Other packages include <code>@dile/crud</code>, <code>@dile/editor</code>, <code>@dile/icons</code> and <code>@dile/utils</code>.</p>
    </blockquote>
    <p>Once you have installed the package, import the component you want to use in your JavaScript:</p>
    <pre><code class="language-html">&lt;script type=&quot;module&quot;&gt;
      import '@dile/ui/components/card/card.js';
    &lt;/script&gt;
    </code></pre>
    <blockquote>
    <p>Note: Standard ES6 modules must be imported using relative paths. To import modules by their npm package names, use a frontend tool like Vite or Webpack. These tools will convert package names into corresponding paths within the <code>node_modules</code> directory. For more information, refer to the <a href="/how-to-use/">setup page</a>.</p>
    </blockquote>
    <p>Finally, you can use the component just like any other HTML tag:</p>
    <pre><code class="language-html">&lt;dile-card shadow-lg title=&quot;Welcome to dile-components&quot;&gt;
      &lt;p&gt;Hi everybody!&lt;/p&gt;
    &lt;/dile-card&gt;
    </code></pre>
    <p>Refer to the component’s documentation page for more markup examples and information on available properties, methods, and configurations. For example, see the <a href="/components/dile-card/"><code>dile-card</code> component docs</a>. All components, mixins, and utilities are well-documented, with examples to illustrate how they work in different scenarios.</p>
    
    <div class="sections">
      <a href="/components"><dile-button>UI Components</dile-button></a>
      <a href="/mixins"><dile-button>Mixins</dile-button></a>
      <a href="/crud"><dile-button>Crud</dile-button></a>
      <a href="/icons"><dile-button>Icons</dile-button></a>
    </div>

    <h2>Browser support</h2>
    <p>
      Since the dile-components are created on top of Web Components Javascript standard, will work on any browser that supports them.
    </p>
    <p>
      All the browers are fully compatible with Web Components. So, is a great moment to join the Web Components movement.
    </p>
  </div>