Svelte Material UI


A common Label and Icon, helper utilities, and elemental components.

npm i -D @smui/common
Common Label and Icon

The common label and icon are also exported from each package that uses them.

SmuiElement Component

Many SMUI components let you customize which DOM element is used to render them. This is done with the SmuiElement component.

I'm a <div /> Button
I'm a <span /> Button
I'm a <strong /> Button
I'm a <em /> Button

I'm a <p /> Button

I'm rendered as a HTML em element!
Svg Elements

In the SMUI components that let you customize which DOM element is used to render them, you can use the "svg" tag to render an SVG.

SVG Logo Designed for the SVG Logo Contest in 2006 by Harvey Rayner, and adopted by W3C in 2009. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site. SVG Logo14-08-2009W3CHarvey Rayner, designerSee document descriptionimage/svg+xml
Clicked: 0

Helper Utilities

Class Map

Build a class string from a map of class names to conditions. This is useful when you need to add classes to a component, since Svelte's "class:" directives don't work on components. (It's also useful for actions that take addClass and removeClass functions.)


Dispatch a custom event. This differs from Svelte's component event system, because these events require a DOM element as a target, can bubble (and do by default), and are cancelable with event.preventDefault(). All SMUI events are dispatched with this instead of Svelte's createEventDispatcher.

I'm the event listener.
I'm the event target.

Caught Event Detail: undefined
Exclude and Prefix Filter

Exclude differs from normal omit functions by also excluding all properties that begin with a given string if that string ends with "$". Prefix Filter filters an object for only properties with a certain prefix. They are usually used together to allow props to be given to multiple elements within a component.

Forward Events Builder

Build an action to allow **all** events to be forwarded from a Svelte component, with support for event modifiers using the "$" syntax.

  • This is especially useful for UI library components, as it is generally unknown which events will be required from them for all desired use cases. For example, if a Button component only forwards a click event, then no use case that requires the mouseover or the keypress event can be used with it.
  • In addition, a component that uses Svelte's built in event forwarding system cannot allow event listeners on the "capture" phase of the event lifecycle. It also cannot allow events to be cancelable with the browser's built in preventDefault function. In fact, the one big advantage to Svelte's event system, the fact that you don't need an element as an event target, doesn't even apply to UI library components.

Click me, key press me, focus me, blur me, use me however you want.
Clicked: 0, Key Pressed: None, Focused: false
Use Actions

An action that takes actions and runs them on the element. Used to allow actions on components, and forward actions from one component to another, until the ultimate component finally renders the DOM element.

Swipe me.
Tap me.
Press me.

A function that announces a string of text to users who are using a screen reader.

Note that this demo will not work for you if you are not using a screen reader.

Other Components

Class Adder Builder

Use this to build a ClassAdder component. ClassAdder components are useful for reducing the size of your bundle. If you have tons of simple components that just need to add classes/props or set a context, using ClassAdder components means there's only one actual Svelte component in your bundle for all of these many tiny components.

I'm a component with an added class!