logo polydile dile-components

Polydile Web Components

Design components

Custom elements made for all kind of projects and frameworks.

How to use Components catalog

Use everywhere

It's Javascript Web Components, you can use in Vanilla.js or any framework you want.

Customizable

Every component has a base design and they are also fully customizable.

Lightweight

Only a few Kb per component! Always lightweight, for optimized projects.

Multiple purposes

Components for common (and no so common) purposes. You can use only one... or all of them.

Generic mixins

There are components, but also mixins for many generic case to develop user interfaces.

Easy to understand

The components are easy to understand for every developer, so you can expand and contribute with us.

Quick start

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:

npm install @dile/ui

The @dile/ui package is the main package containing the User Interface components. Other packages include @dile/crud, @dile/editor, @dile/icons and @dile/utils.

Once you have installed the package, import the component you want to use in your JavaScript:

<script type="module">
      import '@dile/ui/components/card/card.js';
    </script>

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 node_modules directory. For more information, refer to the setup page.

Finally, you can use the component just like any other HTML tag:

<dile-card shadow-lg title="Welcome to dile-components">
      <p>Hi everybody!</p>
    </dile-card>

Refer to the component’s documentation page for more markup examples and information on available properties, methods, and configurations. For example, see the dile-card component docs. All components, mixins, and utilities are well-documented, with examples to illustrate how they work in different scenarios.

UI Components Mixins Crud Icons

Browser support

Since the dile-components are created on top of Web Components Javascript standard, will work on any browser that supports them.

All the browers are fully compatible with Web Components. So, is a great moment to join the Web Components movement.