Svelte Materialify

Currently In Active Development

A better Material UI design framework for Svelte with full support for light / dark themes and customisability.

This is still in development. To contribute, please read CONTRIBUTING.md and open a PR.

There are currently more than 50+ different components are more are planned to arrive soon.

Website

Website is located at https://svelte-materialify.vercel.app/, it is still in development.

Installation

Get Started with Svelte Materialify, the best material UI component library for Svelte

Minimal Install

If you want to try out svelte materialify and tinker with it, visit the repl playground.

If want a fast and basic setup then only installing svelte-materialify should be fine.

$ npm i svelte-materialify

And then in your svelte files, import the compiled module for svelte materialify

<script>
  // In a svelte file
  // Import Everything
  import * as S from 'svelte-materialify';
  // OR
  import { Button } from 'svelte-materialify';
  // Import a single component
</script>

We can also optionally add focus-visible, if you want keyboard focused styles.

<script src="https://unpkg.com/focus-visible@latest/dist/focus-visible.min.js"></script>

Advanced Install

If you want finer control over Svelte Materialify and installation you want to install all its peer dependencies. Follow this guide for SSR.

$ npm i -D svelte-materialify svelte-preprocess sass postcss

<script>
  // In a svelte file
  // Import Everything
  import * as S from 'svelte-materialify/src';
  // OR
  import { Button } from 'svelte-materialify/src';
  // Import a single component
</script>

Then create a _material-theme.scss file and place it in any folder, lets put it in a folder called theme. Then include the path in the preprocess function in your rollup.config.js (likewise follow the same in webpack but for svelte-loader).

Svelte

import sveltePreprocess from 'svelte-preprocess';

const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['theme'],
  },
});

export default {
  // ...,
  plugins: [
    svelte({ preprocess }),
    // ...
  ],
};

Sapper Integration

import sveltePreprocess from "svelte-preprocess";

const preprocess = sveltePreprocess({
  scss: {
    includePaths: ["theme"],
  }
});

export default {
  client: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
  },
  server: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
    ],
  },
};

Thanks:

• Shriji for the logos.
• MDsveX
• Vuetify
• Material Design