$ show zdhxiong/mdui
mdui is a comprehensive Web Component library implementing Material Design 3 (Material You). It provides over 30 reusable UI components (buttons, dialogs, navigation, forms, etc.) built with Lit, supporting dynamic color theming, dark/light modes, and localization across 60+ languages. The library is framework-agnostic and can be used directly in HTML or with any frontend framework. It includes a bundled jQuery-like utility (@mdui/jq) for DOM manipulation, a Model Context Protocol (MCP) server for AI-assisted development tooling, and IDE plugins for VS Code and JetBrains. The codebase is well-structured with a monorepo managed by pnpm, featuring shared mixins, controllers, and decorators that promote consistency across components. The project is actively maintained with recent commits, comprehensive documentation, and a large demo site.
The LLM identified 5 files worth highlighting for reuse:
A lightweight, self-contained jQuery-like library providing chainable DOM manipulation, event handling, AJAX, and data storage. It is designed as a standalone package (@mdui/jq) and can be used independently of the mdui component library. The API closely mirrors jQuery's, making it a drop-in replacement for projects that prefer a small, zero-dependency alternative. It includes extensive test coverage comparing behavior against jQuery.
A set of helper functions (animateTo, stopAnimations, getDuration, getEasing) that wrap the Web Animations API and CSS transitions. These are used throughout the mdui components for consistent open/close animations. The module is isolated from internal component logic and can be extracted into any web project to simplify animation orchestration. It provides a promise-based API for sequencing animations and handling interruption.
A Lit mixin (FocusableMixin) that adds focus management capabilities to any custom element, including focus trapping, tabindex management, and programmatic focus methods. It is used by many mdui components to ensure consistent keyboard navigation. The mixin is self-contained and can be applied to any Lit component to provide accessible focus behavior without coupling to the rest of the library.
A Model Context Protocol (MCP) server that exposes structured metadata about the mdui component library (components, CSS classes, CSS variables, documentation, icons) as tools for AI agents. It reads from pre-built JSON data files and provides a stdio interface. This is a reusable pattern for any UI library that wants to enable AI-assisted development, allowing agents to query component APIs, styles, and documentation programmatically.
A utility module implementing a singleton Modal class that manages overlay stacking, z-index, and focus trapping. It provides lockScreen/unlockScreen functions that prevent scrolling and manage a backdrop element. This is a self-contained pattern for managing modal dialogs, tooltips, and drawers in any web application, ensuring proper accessibility and overlay layering.