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. Add preprocessor for both client and server bundles. Sapper
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.