Sam Cook

» Blog

Using Material Design Components In A Svelte App #

The below video tutorial shows how you can use plain old Material Design Components (Web) in your Svelte apps. Specifically, we walk through how to make a re-usable button component (with ripple effect) by copying the code directly from https://material.io (with a few extra tricks to make things work smoothly with Svelte).

Final code can be found here: https://github.com/sjc5/svelte-material-starter

Update: A few commenters have noted that there are other more efficient ways of accomplishing component binding in Svelte (compared to the unique id method shown in my video), and at least one person made a fork of the repo above implementing an alternative, more Svelte-ish method. I am not a Svelte expert per se (as I am more focused on React), so I highly recommend going and reading through the YouTube comments and taking a look at that forked repo after watching the video.