# Material Components for Elm

**URL:** <https://discourse.elm-lang.org/t/material-components-for-elm/4400>\
**Category:** Show and Tell\
**Created:** [September 29, 2019, 4:38pm UTC](https://discourse.elm-lang.org/t/material-components-for-elm/4400 "2019-09-29T16:38:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aforemny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/aforemny/32/2557_2.png) [@aforemny](https://discourse.elm-lang.org/u/aforemny)\
**Post date:** [September 29, 2019, 4:38pm UTC](https://discourse.elm-lang.org/t/material-components-for-elm/4400/1 "2019-09-29T16:38:51Z")

</div>

I am pleased to announce the release of [material-components-web-elm](https://package.elm-lang.org/packages/aforemny/material-components-web-elm/latest/). It is my latest attempt of integrating [Material Components for the web](https://github.com/material-components/material-components-web) with Elm.

Using custom elements it leverages the existing implementation and I hope it makes using material components in Elm easy and intuitive. This is the [simple-counter example](https://ellie-app.com/6N2CMN9hYrFa1) from the GitHub repository on Ellie. The [demo](https://aforemny.github.io/material-components-web-elm/) shows the currently supported component set.

If anyone is trying this out, I would be more than happy to hear your feedback. Feel free to reach out on Slack or GitHub issues, especially if you are having trouble with anything or if you are discovering a bug.

---

<div class="post-metadata">

**Author:** ![berend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/berend/32/2250_2.png) [@berend](https://discourse.elm-lang.org/u/berend)\
**Post date:** [September 30, 2019, 7:41pm UTC](https://discourse.elm-lang.org/t/material-components-for-elm/4400/2 "2019-09-30T19:41:35Z")

</div>

For completeness sake let me mention a “competing” alternative. @aforemny also made a port of Google’s Material Components for the Web using native Elm, so just reusing the SASS, and reimplementing the JavaScript in Elm: [elm-mdc](https://github.com/aforemny/elm-mdc).

That’s the version I prefer. Obviously there’s work involved in porting the JavaScript now and then, but for me it integrates better with Elm, and I’m committed to maintaining this. There’s still a little bit of JavaScript needed to implement functionality not in Elm (for example [we can’t access onScroll](https://github.com/elm/browser/pull/85) etc etc] but at its core it’s all pure Elm.

A web components approach has the advantage you don’t have to reimplement the JavaScript. And it’s the library @aforemny thinks will work the best for him in the future.

I’ve learned a lot about Elm by looking and maintaining @aforemny code, and I’ve appreciated all his help! Regardless what version you use, let’s create intuitive and beautiful applications with Material Design!

---

<div class="post-metadata">

**Author:** ![1hko](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/1hko/32/1328_2.png) [@1hko](https://discourse.elm-lang.org/u/1hko)\
**Post date:** [October 1, 2019, 12:22pm UTC](https://discourse.elm-lang.org/t/material-components-for-elm/4400/3 "2019-10-01T12:22:30Z")

</div>

Did you realize that @aforemny is the one that created this thread?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [October 11, 2019, 12:22pm UTC](https://discourse.elm-lang.org/t/material-components-for-elm/4400/4 "2019-10-11T12:22:31Z")

</div>

Closed on October 11, 2019, 12:22pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.