A library of Svelte Material UI components, based on Material Design Components - Web.
Here are some unique features that help SMUI stand out:
use={[Action1, [Action2, action2Props], Action3]}
.input$maxlength="15"
.on:click$preventDefault$capture={handler}
syntax.To get started, check out the installation docs or the SvelteKit docs.
If you need help using SMUI, join the Discord server.
Upgrading from an old version? Be sure to read the migration doc.
Upgrading from v6? No more elemental components; you can now use the "tag" prop for HTML elements or the "Svg" component. No more "ComponentDev" types; components can now be used as their type. Check out the upgrade instructions.
Upgrading from v5? If you're still using the advanced styling method, it's really time to switch to the easy styling method. '/styled' endpoints are no longer provided. Check out the upgrade instructions.
Upgrading from v4? SMUI v5 requires the TypeScript preprocessor. SMUI v6 does not though, so if you upgrade straight to v6, don't worry. Check out the upgrade instructions.
Upgrading from v3? SMUI's styling method has been simplified. Check out the upgrade instructions.
Upgrading from v2? There are lots of changes listed in the upgrade instructions.
You can find older versions of the docs on their respective branch:
You can include icons in a number of ways, but the easiest is the Material Icon Font. This will give you the standard set of Material Icons, available with the CSS class "material-icons".
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
However, there are two downsides. First is that all icons are downloaded, no matter which ones you use, so the size over the wire will almost certainly be more than necessary. Second is that it only includes the Material Icons from Google.
Another option is the Material Design Icons library. See the "Using SVGs" demo on the Icon Button demo page for instructions to use icons from the @mdi/js
package (or any other SVG icons).
You can even use them in data URLs:
To get a data URL for the icon:
data:image/svg+xml;base64,encodedcontent
, replacing "encodedcontent" with the Base64 results.background-image: url();
).Click a component/package below to go to the documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)
† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.
‡ This is not an MDC-Web component (upstream library). It is an addition that SMUI provides.
Copyright 2019-2023 Hunter Perrin
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.