Polydile Web Components

Custom elements designed for any project or framework
Use it anywhere
Use this catalog of Web Components anywhere, as they work with Vanilla JS or any framework you prefer.
Customizable design
Each component has a base design and is fully customizable using CSS custom properties.
Lightweight
Just a few KB per component! Always lightweight, perfect for optimized projects.
Multiple purposes
Components for common (and not-so-common) purposes. Use just one… or all of them!
Generic mixins
There are components, but also mixins for many generic use cases in UI development.
Easy to understand
The components are easy for any developer to understand, so you can expand them and contribute with us.
Quick start
To use the Dile Components catalog, install the package for the component you need. You can find the installation command on the component’s documentation page. For example:
npm install @dile/ui
@dile/ui
is the main package containing the User Interface components. Other packages include@dile/crud
,@dile/editor
,@dile/icons
and@dile/utils
.
After installing the package, import the component you want to use in your JavaScript code:
<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 resolve package names to their corresponding paths inside the
node_modules
directory. For more details, check the setup page.
Finally, you can use the component just like any other HTML element:
<dile-card shadow-lg title="Welcome to dile-components">
<p>Hi everybody!</p>
</dile-card>
Check the component’s documentation page for more markup examples and details on available properties, methods, and configurations. For example, see the dile-card
component docs. All components, mixins, and utilities are well-documented, with examples demonstrating how they work in different scenarios.
Browser support
Since Dile Components are built on top of the Web Components JavaScript standard, they will work in any browser that supports it.
All modern browsers fully support Web Components, so this is a great time to join the Web Components movement.