Production Ready

Build polished products faster with a modern Web Components system.

Dile Components helps teams ship consistent interfaces across frameworks with accessible primitives, polished design tokens, and documentation focused on real implementation.

Start in minutes

Explore components

Open source on GitHub

Framework agnostic Use in Vanilla JS, Lit, React, Vue, Angular, and more.

Designed for scale Reusable patterns, shared tokens, and long-term consistency.

Ready to customize Light and dark theming with first-class CSS custom properties.

Everything your design system rollout needs

From UI building blocks to CRUD workflows, editor tools, AI skills, and CLI automation, Dile Components gives product teams a complete toolkit without locking them into a single framework.

Use it anywhere

Ship the same components across projects and stacks with native Web Components.

Professional theming

Create a branded light and dark experience with coherent color tokens.

Lightweight by default

Keep performance budgets healthy with focused, composable components.

Broad component coverage

Build onboarding flows, forms, dashboards, and admin features faster.

Utilities and mixins

Reuse behavior patterns to keep your codebase clean and predictable.

Documentation that guides

Clear examples and references make adoption easy for every team member.

AI skills included

Use curated skills to speed up repetitive tasks and improve implementation workflows.

CLI for automation

Scaffold, maintain, and scale your setup with practical command-line tooling.

1) Install what you need

Start with the UI package, then extend with CRUD, editor, icon libraries, app helpers, PDF tools, and utilities as your product evolves.

npm install @dile/ui

Also available: @dile/crud, @dile/editor, @dile/iconlib, @dile/icons, @dile/lib, @dile/pdf-viewer, and @dile/utils.

2) Import and use

Import only the components your page needs and use them as native HTML tags.

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

<dile-card title="Welcome" shadow-lg>
  <p>Your interface is ready.</p>
</dile-card>

Using Vite or Webpack lets you import directly from npm package names.

Built on web standards, compatible with modern browsers

Dile Components are based on the Web Components standard and work in all major modern browsers. If your product targets modern platforms, you can adopt the library with confidence.