@sandlada/vue-mdc

@sandlada/mdc

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

Written by Lit Framework, relying on the cross-framework capabilities of Lit and Web Component, you can use this library on any framework (Vue, Angular, React, etc.).

:zap: Highlights

• Material Design 3 & Material Expressive - tracks the MD3 / MD3E specs and is themed entirely through --md-sys-* design tokens.
• Framework agnostic - built with Lit and native Web Components, so the same <mdc-*> elements work in React, Vue, Angular, Svelte, Astro, or plain HTML.
• Tree-shakable - every component is its own entry point under @sandlada/mdc/components/<name>/index, so you import only the elements you use.
• Accessible by default - keyboard navigation, ARIA semantics and focus rings, with forced-colors, prefers-contrast, reduced-motion and reduced-transparency support (WCAG 2.2+).
• Modern baseline, zero polyfills - targets Baseline 2026 evergreen browsers with native CSS and no vendor prefixes or legacy fallbacks.
• TypeScript ready - ships .d.ts declarations alongside the ESM build.

:eyes: Installation

npm i @sandlada/mdc

:ledger: Offcial Website & Documents

For more information about MDC, please visit mdc.sandlada.com.

:telescope: Dev Preview

The component showcase (packages/dev-app) is deployed to mdc-dev-app.bre97-web.workers.dev via Cloudflare Workers Builds. Every push gets a preview deployment, so the site always tracks the latest state of the repository.

:ship: Example

Don't know how to use MDC? Explore MDC with simple examples from Github Wiki - Examples.

:world_map: Roadmap

If you want to follow the latest progress of MDC, please jump to issue Project Tracker.