Introduction

svelte-mui is a set of the lightweight (~33 KB minzipped) UI components for Svelte, inspired by Google's Material Design

Quick start with new project

Note that you will need to have Node.js installed

Create a new project based on sveltejs/template

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

Add components

npm install --save-dev svelte-mui

Modify file src/App.svelte in the following way

<h1>Hello {name}!</h1>

<Checkbox bind:checked>Checkbox</Checkbox>

<p>Checkbox is <strong>{checked ? 'checked' : 'unchecked'}</strong></p>

<Button
    outlined
    shaped
    color="Red"
    on:click={() => { checked = !checked }}
>
    Inverse
</Button>

<script>
    export let name;
    // import any components
    import { Button, Checkbox } from 'svelte-mui';

    let checked = true;
</script>

<style>
    h1 {
        color: purple;
    }
</style>

<script>
    import { Button, Checkbox } from 'svelte-mui/src';
</script>

...then start Rollup

npm run dev

Navigate to localhost:8080

NOTE: In real applications, you have to add global styles to disabled states

    .disabled,
    [disabled] {
        opacity: 0.5;
        pointer-events: none;
    }

    .disabled .disabled,
    .disabled [disabled],
    [disabled] .disabled,
    [disabled] [disabled] {
        opacity: 1;
    }

Get started with an example

Clone repo vikignt/svelte-mui

git clone https://github.com/vikignt/svelte-mui.git

Then explore the example

cd svelte-mui/example
npm install
npm run dev

Navigate to localhost:5000