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.io

Many SMUI components are based on Material Design Components for Web, by Google. It integrates these components using the "Advanced Approach", where the MDC Foundation does some business logic, and the SMUI component handles DOM updates and data binding.

Sass

Like MDC-Web, SMUI is styled through Sass. SMUI supports all of the mixins provided by Material Design Components for Web, and provides some additional helpful mixins. You can customize the look of your UI with just a few variables.

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, provided by MDC-Web. 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.