Svelte Material UI

Material UI components for Svelte apps

Svelte

SMUI provides strictly typed Svelte components and actions for a wide variety of interface elements. SMUI also provides helper utilities for building custom and advanced UI components.

Material

SMUI components follow the Material Spec, by Google. As well as implementing the components from the spec as closely as possible, SMUI provides additional components that aim to match the Material design while giving you flexibility and ease of development.

Sass

SMUI is styled with Sass. SMUI provides variables to customize the look of the UI and mixins to help style your own elements. You can customize the look of your UI with just a few variables.

Made with ❤️ by Port87 Email

Fully, Strictly Typed

SMUI is strictly typed with TypeScript. This not only helps catch bugs early, it helps while developing as every property is autocompleted by modern IDEs.

Accessible by Default

SMUI automatically adds appropriate ARIA attributes to components to provide accessibility to screen readers. SMUI is also fully keyboard accessible, meaning motor impaired users can easily use SMUI components.

Touch Friendly

SMUI provides increased touch targets to allow ease of use on mobile devices, conforming to the Material Spec requirement of minimum 48px x 48px touch targets.

Server Side Rendering

SMUI can be fully rendered on the server, meaning faster time to first meaningful paint. SMUI fully supports SvelteKit. In fact, the site you're looking at is a SvelteKit app.

Fully Themable

Components are themable using Sass variables. Everything from their shape, color, density, borders, interaction states, and more is themable.

RTL/Internationalization Support

SMUI is RTL aware, and components will adapt their design to suit the language of the user.

Widely Used, a Growing Community

With over 3,000 projects using SMUI components, it is the most popular Svelte UI library. For good reason, too. It is the most versatile and adaptable Svelte UI library, guaranteed.

Adaptable, Versatile

SMUI supports adding arbitrary attributes and actions to every component and many internal elements within them. SMUI forwards all events from every component, and supports event modifiers, including passive. SMUI works in the Svelte REPL, meaning you can play with it right now.

Material Design Compliant

Every SMUI component fully follows the Material Design specification. You can build up-to-spec UIs with SMUI.