dile-components
Ship your first component in minutes
Dile Components are standard Web Components built with Lit, so they work seamlessly with any JavaScript framework — or with no framework at all. Install a package, import what you need, and drop native HTML tags straight into your markup.
Pick only the packages you need
Dile components are split into focused npm packages, so your bundle only grows with what you actually use.
@dile/ui
User interface web components.
@dile/editor
WYSIWYG editor to create Markdown contents.
@dile/utils
General utility components.
@dile/crud
Generic and customizable CRUD components.
@dile/lib
Components and utilities for easily creating apps.
@dile/iconlib
Popular open-source icon catalogs provided as custom elements.
@dile/icons
A sub-set of Material Icons as Lit-html templates.
@dile/pdf-viewer
PDF viewer web component.
From install to production
Each component has its own detailed documentation with specific usage instructions, properties, and examples. This is the general workflow that applies to all of them.
1. Install the package you need
Install the package that contains the component you're after. For example, to use
dile-input you'd install @dile/ui via npm:
npm install @dile/uiEach component's documentation page lists its own specific installation instructions.
2. Import the component
Use an ES modules import in your JavaScript code, referencing the npm package name.
import '@dile/ui/components/input/input.js';To resolve imports by npm package name in the browser, you'll need a module bundler such as Vite, Webpack, or Rollup.
3. Use the component
Drop the custom element into your HTML like any other native tag.
<dile-input
name="name"
label="Name"
value="John"
></dile-input>Every component ships with CSS Custom Properties for colors, spacing, borders, and more — so you can match your own design system.
4. Read the docs
Each component's documentation page covers its properties, CSS Custom Properties, API methods, and custom events in detail.
5. Serve your project
Several development servers work well here. We recommend Vite or web-dev-server.
6. Build your project
Building requires a bundler such as Webpack, Rollup, or similar. Vite is currently the easiest option.
Creating apps? Let the CLI do the heavy lifting
Beyond individual components, the @dile/lib package and the Dile Components CLI can
scaffold a complete frontend application for you — responsive layout, authentication, state
management, and user feedback components included.
Ready to start building?
Browse the full catalog to find the components you need, then make them yours with a couple of CSS Custom Properties.