@deepfuture/dui-components

v1.1.0

Published

a day ago

DUI styled web components — extends dui-primitives with design tokens and variant CSS

Downloads

2,897

0High
0Medium
0Low

josh-deepfuture

web-components lit unstyled components dui theme

DUI

Styled Lit web component library built on dui-primitives.

DUI extends unstyled, accessible primitive components with a complete design system — design tokens, variant systems, and aesthetic CSS. Import a component and it's ready to use. No setup, no configuration.

Live Docs & Demos →

Install

npm / pnpm / yarn:

npm install @deepfuture/dui-components

CDN (zero setup):

<script type="module" src="https://cdn.jsdelivr.net/npm/@deepfuture/dui-cdn/dui.min.js"></script>

Quick Start

Import the components you need — they self-register on import:

import "@deepfuture/dui-components/button";
import "@deepfuture/dui-components/dialog";

<dui-dialog>
  <dui-dialog-trigger>
    <dui-button>Open Dialog</dui-button>
  </dui-dialog-trigger>
  <dui-dialog-popup>
    <h2>Hello</h2>
    <p>This is a dialog.</p>
    <dui-dialog-close>
      <dui-button appearance="outline">Close</dui-button>
    </dui-dialog-close>
  </dui-dialog-popup>
</dui-dialog>

Or register everything at once:

import "@deepfuture/dui-components";

How It Works

DUI uses a two-layer inheritance model:

Primitives (@dui/primitives) — unstyled base classes with accessibility, keyboard behavior, and ARIA built in
Components (@dui/components) — extend primitives with design tokens, variant systems, and aesthetic CSS

Each component self-registers via customElements.define() when imported. Design tokens are automatically injected into document.adoptedStyleSheets on first import.

DuiButtonPrimitive (structure, ARIA, keyboard)
       ↓ extends
DuiButton (tokens, variants, aesthetic CSS, customElements.define())

No build step, no setup function, no configuration — just import and use.

Components

43 component families, 85+ elements total.

| Category | Components | |----------|-----------| | Actions | Button, Toggle, Toggle Group, Toolbar, Split Button | | Forms | Input, Textarea, Select, Combobox, Checkbox, Radio, Switch, Slider, Number Field, Dropzone, Field, Fieldset | | Data Display | Badge, Avatar, Calendar, Data Table, Progress, Spinner, Separator, Trunc | | Overlays | Dialog, Alert Dialog, Popover, Tooltip, Menu, Menubar, Preview Card, Command | | Disclosure | Accordion, Collapsible, Tabs | | Navigation | Breadcrumb, Sidebar (with 12 sub-components), Stepper | | Layout | Card, Card Grid, Scroll Area, Portal | | Utility | Icon |

Styling

DUI uses a two-layer approach to styling:

CSS Variables — for the variant system

Variables control values that variants, sizes, and states toggle:

/* Override variant colors */
dui-button {
  --button-bg: linear-gradient(135deg, pink, purple);
  --button-radius: var(--radius-full);
}

`::part(root)` — for everything else

Every component exposes a root CSS part for full CSS expressiveness:

/* Frosted glass effect */
dui-dialog-popup::part(root) {
  backdrop-filter: blur(12px);
}

/* Custom hover animation */
dui-button::part(root):hover {
  filter: brightness(1.25);
  transform: translateY(-1px);
}

/* Glow shadow */
dui-badge::part(root) {
  box-shadow: 0 0 16px oklch(0.7 0.2 280 / 0.4);
}

No need for the library to anticipate every CSS property — ::part() gives you direct access.

Dark Mode

Toggle dark mode by setting data-theme="dark" on the <html> element:

<html data-theme="dark">
  <!-- All DUI components render in dark mode -->
</html>

Templates

Pre-composed UI patterns built from DUI components — ready-to-use cards, feed items, and other building blocks. Templates adapt automatically to dark mode and token overrides.

npm install @deepfuture/dui-templates

import "@deepfuture/dui-templates/feed";

<dui-feed-item
  title="Earthquake detected"
  subtitle="USGS Pacific Northwest"
  timestamp="2 min ago"
  category="Seismic"
  severity="high"
  description="Magnitude 4.2 recorded near Portland, OR."
></dui-feed-item>

Templates self-register on import, just like components.

Packages

| Package | Purpose | |---------|---------| | @deepfuture/dui-components | Styled components (extends dui-primitives) | | @deepfuture/dui-templates | Pre-composed UI patterns | | @deepfuture/dui-cdn | Pre-bundled CDN build (all deps inlined) | | @deepfuture/dui-inspector | Runtime inspector & mutation API |

Foundation (separate repo):

| Package | Purpose | |---------|---------| | @deepfuture/dui-primitives/core | Base reset, event factory, floating UI utilities (part of dui-primitives) | | @deepfuture/dui-primitives | Unstyled accessible component classes |

Dev Tools

Theme Editor

A visual editor for design tokens. Edit colors with OKLCH sliders, tweak spacing and typography, and export your customized tokens.css.

Inspector

A runtime inspector and mutation API for DUI components (separate package). Two interfaces:

Visual UI (Ctrl+Shift+I) — hover-highlight components, inspect properties/tokens/styles, edit theme CSS and design tokens live
Console API — window.__dui_inspect(), window.__dui_mutate.*, window.__dui_export() for programmatic access by agents or scripts

Documentation

Live Docs — interactive demos for every component
Architecture — two-layer inheritance model, package responsibilities
Creating Components — extending primitives into styled components
Creating Templates — building pre-composed UI patterns
Theming — color system, design tokens, variant CSS
Styling — customizing components with variables and ::part()
Consuming — integrating DUI into an app

Building Your Own Component Set

DUI itself is an example of extending dui-primitives. You can build your own styled component library the same way:

Install @deepfuture/dui-primitives
Extend primitives with your own aesthetic CSS
Call customElements.define() to self-register

See Creating Components for the full pattern.

License

MIT