Chat on Discord • Documentation • Changelog • Component Status
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).
Contributing
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.
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
Click me! There is a nice ripple effect on this text.
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 --> <!-- Default styles -->
Demos
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 -->
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.
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.