demo)Svelte Toolbox (
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 https://github.com/svelte-toolbox/svelte-toolbox.gitcd svelte-toolboxnpm 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.
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
Click me!There is a nice ripple effect on this text.
You can use CDN's from
bundle.run. You can also install
svelte-toolbox into your project via
In this example, however, we will use the
<!-- CSS/JS --><!-- Default 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
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 -->
|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.
- @YogliB for providing the svelte-component-template used for this project
- @TehShrike for his help and advice
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.