Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
Chat on DiscordDocumentationChangelogComponent Status

Svelte Toolbox (demo)

A UI component library for Svelte implementing Google's Material Design specification.

Beacuse Svelte Toolbox is early in development, some things may change before we hit v1.0.0 (Please see Component Status).


Pull requests are always welcome!

git clone
cd svelte-toolbox
npm install

To start the development server:

npm run dev

To clean up the project and format the files:

npm run lint

You are welcome to add new features or components, but please open an issue to discuss your idea first.


Not all of these components are stable. Please see the Component Status section.

There is detailed documentation about each of the components below, but the basic usage can bee seen below.


Installing svelte-toolbox as a devDependency allows Svelte to compile the svelte-toolbox components right along with the rest of your code.

npm i --save-dev svelte-toolbox
# or yarn
	import { UIButton, Ripple } from 'svelte-toolbox';

<UIButton on:click="{() => alert('done!')}">Click me!</UIButton>

	There is a nice ripple effect on this text.


You can use CDN's from,, or You can also install svelte-toolbox into your project via npm or yarn.

In this example, however, we will use the unpkg CDN:

<!-- CSS/JS -->
<script src=""></script>

<!-- Default styles -->

<div id="button"></div>

	new Toolbox.UIButton({ target: document.querySelector('#button') });


Global Styles

We recommend adding the contents of public/global.css to your global stylesheet. These will be the default styles for the components you import from svelte-toolbox.

P.S. If you like the styles in public/global.css, and don't want to change them, you could just link to it:

<!-- or, depending on your setup, you might even be able to do this  -->
<link href="node_modules/svelte-toolbox/public/global.css" rel="stylesheet" />

Component Status

Component Status
Ripple Stable, no breaking changes or new features are expected.
UIButton Stable, in that no breaking chenges are expected, but new features are.
UIInput Mostly Stable, there is some improvment under the hood to be done. This might effect the public API.
IconButton Stable. Although new features are expected, no breaking changes are.
Switch Stable. Although new features are expected, no breaking changes are.
Card Stable, no breaking changes or new features are expected.
Checkbox Unstable. This component is not yet finished. Please see this project.


Some of these components are still unstable. Please see the Component Status section.

Need help? Have a question?

Then you have come to the right place.

Open an Issue or join the question friendly Discord Server.



As I was working on an app using Sapper, I was made aware of the fact that if there was a UI component library out there for Svelte, it would make developing a Svelte app so much easier!

I am a big fan of the Google Material Design patterns, and because I really like React Toolbox, I decided to make something like it for Svelte.