A library of Svelte Material UI components, based on Material Design Components - Web.

Demos

https://sveltematerialui.com

Features

Here are some features you should know about:

• Full TypeScript support, including HTML attributes.
• You can add arbitrary attributes to all of the components and many of the elements within them.
• You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.
• You can add props to lower components and elements with "$" props, like input$maxlength="15".
• All events are forwarded. This includes DOM events, MDC events, and custom events.
  • You can add event modifiers with the on:click$preventDefault$capture={handler} syntax.
    • If you use Svelte's native on:click|preventDefault={handler} syntax, it will not compile. You have to use "$" instead of "|". (The extra S inside the | stands for SMUI.)
  • Supported modifiers are:
    • preventDefault
    • stopPropagation
    • passive
    • nonpassive
    • capture
    • once
• Labels and icons are named exports in the components that use them, or you can use the 'Label' and 'Icon' exports from '@smui/common'. (Except for chips labels and icons, textfield icons, and select icons, because they are special snowflakes.)
• SMUI supports RTL languages.

Installation

To get started, check out the installation docs or the SvelteKit docs. You'll also need to install the Svelte preprocessor.

Migration

Upgrading from an old version? Be sure to read the migration doc.

Upgrading from v2? There are lots of changes listed in the upgrade instructions.

Upgrading from v3? SMUI's styling method has been simplified. Check out the upgrade instructions.

Upgrading from v4? SMUI now requires the TypeScript preprocessor. Check out the upgrade instructions.

Need Help?

If you need help using SMUI, join the new Discord server.

Get Typed!

I'm super typed to announce, SMUI 5 introduces TypeScript support! All the benefits of TypeScript, all the beauty of SMUI!

Components

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

• Banner
• Button
  • Floating Action Button
  • Icon Button
• Card
• Common
• Data Table
• Dialog
• Drawer
• Elevation†
• Image List
• Inputs and Controls
  • Checkbox
  • Chips
  • Floating Label
  • Form Field
  • Line Ripple
  • Notched Outline
  • Radio Button
  • Segmented Button
  • Select Menu
    • Select Helper Text
    • Select Icon
  • Slider
  • Switch
  • Text Field
    • Text Field Character Counter
    • Text Field Helper Text
    • Text Field Icon
• Layout Grid
• List
• Menu Surface
• Menu
• Paper‡
• Progress Indicators
  • Circular Progress
  • Linear Progress
• Ripple
• Snackbar
  • Kitchen‡
• Tabs
  • Tab
  • Tab Bar
• Tooltip
• Top App Bar
• Touch Target
• Typography†

_{† 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. It is an addition that SMUI provides.}

License

Copyright 2020-2021 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.