Chat on Discord • Documentation • Changelog • Component 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).

Contributing

Pull requests are always welcome!

git clone https://github.com/svelte-toolbox/svelte-toolbox.git
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.

Usage

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.

Svelte/Sapper

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

<script>
	import { UIButton, Ripple } from 'svelte-toolbox';
</script>

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

<Ripple>
	There is a nice ripple effect on this text.
</Ripple>

HTML/CSS/VanillaJS

You can use CDN's from jsDelivr.net, unpkg.com, or bundle.run. 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="https://unpkg.com/svelte-toolbox/dist/index.min.js"></script>
<link
	rel="stylesheet"
	href="https://unpkg.com/svelte-toolbox/public/bundle.css"
/>

<!-- Default styles -->
<link
	rel="stylesheet"
	href="https://unpkg.com/svelte-toolbox/public/global.css"
/>

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

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

Demos

• Svelte
• Sapper
• HTML/CSS/VanillaJS

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:

<link
	href="https://unpkg.com/svelte-toolbox/public/global.css"
	rel="stylesheet"
/>
<!-- 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. |

Documentation

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

• Ripple
• UIButton
• UIInput
• IconButton
• Switch
• Card
• Checkbox

Need help? Have a question?

Then you have come to the right place.

Open an Issue or join the question friendly Discord Server.

Credits

• @YogliB for providing the svelte-component-template used for this project
• @TehShrike for his help and advice

Inspiration

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.

License

MIT