# zdhxiong/mdui

Material Design 3(Material You) UI components using Web Components.

Repository: https://github.com/zdhxiong/mdui
Canonical: https://ross.abutalabs.com/products/mdui
Homepage: https://www.mdui.org
Language: TypeScript
License Family: other
Topics: css, javascript, material, material-design, material-design-3, material-you, web-components
Last push: 2026-07-21T05:28:20+00:00

## Health v2 (maintenance only)
Score: 83/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 93, release rhythm 61, longevity 100
- inputs: {"age_days": 3705, "days_push": 43, "days_rel": 50, "gap_med": 314.0, "n_releases_24m": 3}
- flags: no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 4521, forks 376 (observed 2026-08-28T04:08:52.758455+00:00)

## What it is
mdui is a Material Design 3 (Material You) UI component library built entirely with Web Components in TypeScript. It provides 30+ framework-agnostic components with dynamic color, dark mode, and Material Icons support, usable via npm or CDN.

## Use cases
- build a web app with Material Design 3 components
- add Material You dynamic color theming to a website
- use UI components that work with React, Vue, or Angular
- create a responsive mobile-first frontend without a heavy framework
- add dark mode support to a web application
- quickly prototype pages with Material Design buttons, dialogs, and cards

## When to choose
- you want Material Design 3/Material You styling with Web Components
- you need framework-agnostic components that work in any web project
- you want dynamic color schemes and automatic dark mode
- you prefer a lightweight, zero-dependency component library

## When to avoid
- you need a design system other than Material Design
- you require components with deep framework-specific integrations like React state binding
- you need a license file in the repository root (license is only in the npm package)
- your project targets environments without Web Components support

## Facets
- artifact type: library
- maturity: active
- function: ui-components, css-framework, frontend-framework, theme
- domain: web-development, frontend, web-design
- platform: browser, cross-platform
- tags: material-design-3, material-you, web-components, dark-mode, dynamic-color, typescript, zero-dependencies, nodejs

## Member repositories
- zdhxiong/mdui (main) score 83

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:08:52.758455+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T18:20:17.515952+00:00, confidence not recorded.
  - readme: https://github.com/zdhxiong/mdui (fetched 2026-08-28T04:08:52.758455+00:00, sha 9e94aae4b976)
  - homepage: https://www.mdui.org (fetched 2026-08-29T09:06:27.425532+00:00, sha 4d0e604c4197)
  - site_page: https://www.mdui.org/en/docs/2 (fetched 2026-08-29T09:06:27.429236+00:00, sha a38c7af17108)
  - site_page: https://www.mdui.org/en/docs/1 (fetched 2026-08-29T09:06:27.431891+00:00, sha 92054a7192ed)
  - registry_npm: https://registry.npmjs.org/mdui (fetched 2026-08-29T09:06:27.433791+00:00, sha 6a255bcf2881)
- Data as of 2026-08-30T08:39:29.467469+00:00.