logo polydile dile-components

Polydile Web Components

UI Components preview

Custom elements designed for any project or framework

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.