Installation

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

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

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>

Minimal Install

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>

Advanced Install

If you want finer control over Svelte Materialify and installation you want to install all its peer dependencies.

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

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

Now you can also use SCSS and SASS styles in your own components. Learn more about svelte-preprocess.

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).

Now add a svelte.config.js to add to the root of the project to provide better intellisense.

const sveltePreprocess = require('svelte-preprocess');

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

Rollup

const { preprocess } = require('./svelte.config');

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

Webpack

const { preprocess } = require('./svelte.config');

module.exports = {
  // some config...
  module: {
    rules: [
      {
        test: /.(svelte|html)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            // svelte options...,
            preprocess,
          },
        },
      },
    ],
  },
};

Integrations

Learn how to integrate svelte materialify with existing frameworks.

Sapper

Add preprocessor for both client and server bundles.

const { preprocess } = require('./svelte.config');

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

Templates

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Edit This Page on GitHub

Last Updated: 2021-03-06