Svelte Material UI


Check out the SvelteKit example repo.

You will need to install the packages you use individually as well as the theme package.

npm install --save @smui/button
npm install --save @smui/card
# etc...

npm install --save-dev smui-theme

You will need to use the Easy Styling Method, and you will need to use one of these sets of prepare scripts.

  • For the Default Theme

    "prepare": "npm run vite-workaround",
    "vite-workaround": "find node_modules/@material/ -name "*" -type f -delete"
  • Custom Theme, without Dark Mode

    "prepare": "npm run vite-workaround && npm run smui-theme",
    "vite-workaround": "find node_modules/@material/ -name "*" -type f -delete",
    "smui-theme": "smui-theme compile static/smui.css -i src/theme"
  • Custom Theme, with Dark Mode

    "prepare": "npm run vite-workaround && npm run smui-theme-light && npm run smui-theme-dark",
    "vite-workaround": "find node_modules/@material/ -name "*" -type f -delete",
    "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
    "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"

If you are on Windows, check out the workaround script and how to use it in the SvelteKit example repo instead, because the find command in the vite-workaround scripts above won’t work for you.