Dile Components
Dile Components (@dile/*) is a catalog of framework-agnostic web components built with Lit. They work as plain custom elements in any project — vanilla JS, React, Vue, Angular, etc. — as long as the build tool resolves npm bare imports (Vite, Webpack, Rollup, web-dev-server...).
Package map
Pick only the package(s) that contain what you need — don't install all of them.
| Package |
Use for |
@dile/ui |
General UI components: inputs, modals, tables, buttons, etc. |
@dile/crud |
Generic, configurable CRUD screens/components |
@dile/editor |
WYSIWYG / Markdown rich text editor (ProseMirror-based) |
@dile/utils |
General-purpose utility components |
@dile/lib |
Mixins/helpers for building apps (state, routing, feedback) |
@dile/iconlib |
Icon catalogs (Lucide, Font Awesome, Material...) as custom elements |
@dile/icons |
Subset of Material Icons as Lit templates |
Quick start
- Install only the package(s) you need:
npm install @dile/ui
- Import the specific component file (ESM, bare specifier):
import '@dile/ui/components/input/input.js';
- Use it as an HTML tag:
<dile-input name="name" label="Name" value="John"></dile-input>
- Customize appearance through the component's CSS custom properties (see theming reference below) instead of reaching into its shadow DOM.
Always check the real API before using a component
Component names, props, events, and import paths differ per component and change between versions — don't guess them from memory. Look them up first:
Workflow: fetch llms.txt first to find the right doc link for the component/feature you need, then fetch that specific .md page for exact props, events, slots, and usage examples.
Notes
- All packages are MIT-licensed and published under the
@dile npm scope.
- Packages are versioned independently — check each package's
package.json for the current version.
- Repository: https://github.com/Polydile/dile-components
1---2name: dile-components3description: Use when building or modifying UI with the Dile Components library (@dile/ui, @dile/crud, @dile/editor, @dile/utils, @dile/lib, @dile/iconlib, @dile/icons) — a framework-agnostic, Lit-based web component catalog. Trigger when installing/importing dile-* custom elements, using tags like <dile-input>, <dile-modal>, <dile-table>, building CRUD screens, adding a WYSIWYG/Markdown editor, using icon components, or theming with Dile's CSS custom properties.4---56# Dile Components78Dile Components (`@dile/*`) is a catalog of framework-agnostic web components built with [Lit](https://lit.dev). They work as plain custom elements in any project — vanilla JS, React, Vue, Angular, etc. — as long as the build tool resolves npm bare imports (Vite, Webpack, Rollup, web-dev-server...).910## Package map1112Pick only the package(s) that contain what you need — don't install all of them.1314| Package | Use for |15|---|---|16| `@dile/ui` | General UI components: inputs, modals, tables, buttons, etc. |17| `@dile/crud` | Generic, configurable CRUD screens/components |18| `@dile/editor` | WYSIWYG / Markdown rich text editor (ProseMirror-based) |19| `@dile/utils` | General-purpose utility components |20| `@dile/lib` | Mixins/helpers for building apps (state, routing, feedback) |21| `@dile/iconlib` | Icon catalogs (Lucide, Font Awesome, Material...) as custom elements |22| `@dile/icons` | Subset of Material Icons as Lit templates |2324## Quick start25261. Install only the package(s) you need:27 ```bash28 npm install @dile/ui29 ```302. Import the specific component file (ESM, bare specifier):31 ```javascript32 import '@dile/ui/components/input/input.js';33 ```343. Use it as an HTML tag:35 ```html36 <dile-input name="name" label="Name" value="John"></dile-input>37 ```384. Customize appearance through the component's CSS custom properties (see theming reference below) instead of reaching into its shadow DOM.3940## Always check the real API before using a component4142Component names, props, events, and import paths differ per component and change between versions — don't guess them from memory. Look them up first:4344- **Index of all docs (llms.txt)**: https://dile-components.com/llms.txt — a machine-readable index linking to every component/mixin/CRUD/lib/icon doc page as plain markdown.45- **Fetch a specific doc page directly** once you know its section, e.g.:46 - `https://dile-components.com/md/components/<component>.md`47 - `https://dile-components.com/md/crud/<page>.md`48 - `https://dile-components.com/md/lib/<page>.md`49 - `https://dile-components.com/md/icons/<page>.md`50- **Human docs site**: https://dile-components.com/51- **Theming / CSS custom properties**: https://dile-components.com/theming/52- **Live demo sources**: https://github.com/Polydile/dile-components/tree/master/demos5354Workflow: fetch `llms.txt` first to find the right doc link for the component/feature you need, then fetch that specific `.md` page for exact props, events, slots, and usage examples.5556## Notes5758- All packages are MIT-licensed and published under the `@dile` npm scope.59- Packages are versioned independently — check each package's `package.json` for the current version.60- Repository: https://github.com/Polydile/dile-components
Polydile