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

Demos, Code Samples, and Guides

https://sveltematerialui.com

Features

Here are some unique features that help SMUI stand out:

• 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".
• SMUI supports RTL languages.

Installation

To get started, check out the installation docs or the SvelteKit docs.

Need Help?

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

Svelte 5

SMUI v8 requires Svelte 5. This is the documentation for SMUI v8.

If you are using Svelte 4, you can use SMUI v7, which is the last version to support Svelte 4. Check out the v7 branch for the current docs.

Migration

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

Upgrading from v7? You need Svelte 5. Event listeners no longer to use the CustomEvent type. Check out the upgrade instructions.

Upgrading from v6? You need Svelte 4. No more elemental components; you can now use the "tag" prop to change the element. 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.

Old Docs

You can find older versions of the docs on their respective branch:

• v7 docs
• v6 docs
• v5 docs
• v4 docs

Icons

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:

1. Find your icon and click "Copy SVG" button (it looks like </>).
2. Base64 encode the document.
3. Format the URL like this data:image/svg+xml;base64,encodedcontent, replacing "encodedcontent" with the Base64 results.
4. Now you have an image URL you can use in an "img" tag src attribute or anywhere else you put an image URL (like background-image: url();).

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

• Accordion‡
• Action Buttons
  • Button
  • Floating Action Button
  • Icon Button
• App Bars
  • Bottom App Bar‡
  • Top App Bar
• Badge‡
• Banner
• Card
• Common
• Data Table
• Dialog
• Drawer
• Elevation†
• Image List
• Inputs and Controls
  • Autocomplete‡
  • Checkbox
  • Chips
  • Chip Input‡
  • 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
• 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 (upstream library). It is an addition that SMUI provides.}

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

License

Copyright 2019-2024 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.

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

8.0.3 (2025-08-13)

Note: Version bump only for package @smui/chips

8.0.2 (2025-08-12)

Bug Fixes

• move class prop classes to end of list for sub-components (d9ddb12), closes #698

8.0.1 (2025-07-18)

Bug Fixes

• move all custom classes to end of class list, allowing them to override other classes (a25b839)

8.0.0 (2025-07-18)

Note: Version bump only for package @smui/chips

8.0.0-beta.3 (2024-12-22)

Note: Version bump only for package @smui/chips

8.0.0-beta.2 (2024-12-13)

Note: Version bump only for package @smui/chips

8.0.0-beta.1 (2024-12-11)

Bug Fixes

• finish some migration steps, update readme (95fbdc2)
• type issues (0424a48)

Features

• migrate components in chips to runes (1d9f88d)

8.0.0-beta.0 (2024-11-19)

Bug Fixes

• improve chips trailing action focus state (b61550b)

8.0.0-alpha.0 (2024-05-13)

Bug Fixes

• custom component types (fa5b473)
• explicitly opt out of runes mode in all components (96b69f9)

Features

• events for svelte 5, mount events to contexts, event modifiers, remove custom event typing (52d60b8)
• remove deprecated MDC event names (df78b17)

7.0.0 (2024-05-04)

Note: Version bump only for package @smui/chips

7.0.0-beta.18 (2024-03-17)

Note: Version bump only for package @smui/chips

7.0.0-beta.17 (2024-03-13)

Note: Version bump only for package @smui/chips

7.0.0-beta.16 (2023-12-27)

Bug Fixes

• cast component type to something ts likes (017039f)

7.0.0-beta.15 (2023-09-04)

Bug Fixes

• add declaration files to work around rollup typescript resolving modules to the src directory (b09a46b), closes #556

7.0.0-beta.14 (2023-06-30)

Bug Fixes

• move omit generic down line to fix union type that is too complex to represent type error (b26b1d4)

7.0.0-beta.13 (2023-06-29)

Bug Fixes

• rework tag prop to allow svg, simplify prop types to fix ts error (d1610c8)

7.0.0-beta.12 (2023-06-29)

Note: Version bump only for package @smui/chips

7.0.0-beta.11 (2023-06-29)

Note: Version bump only for package @smui/chips

7.0.0-beta.10 (2023-06-28)

Bug Fixes

• import ambient types from index files for ts event support (d62e12c)
• reference ambient types instead of importing them (2d1193c)
• suppress typescript issues with importing svelte internals (985183c)

Features

• migration to Svelte 4 in components (51d2411)
• use new generics definitions for better typing of components with tag prop (4476f3a)

7.0.0-beta.9 (2023-06-20)

Note: Version bump only for package @smui/chips

7.0.0-beta.8 (2023-04-29)

Note: Version bump only for package @smui/chips

7.0.0-beta.7 (2023-04-29)

Note: Version bump only for package @smui/chips

7.0.0-beta.6 (2023-04-29)

Note: Version bump only for package @smui/chips

7.0.0-beta.5 (2023-04-28)

Note: Version bump only for package @smui/chips

7.0.0-beta.4 (2023-04-24)

Note: Version bump only for package @smui/chips

7.0.0-beta.3 (2023-04-06)

Note: Version bump only for package @smui/chips

7.0.0-beta.2 (2023-04-06)

Bug Fixes

• never confuse an exported function type with an html attr type (d00860a), closes #575

7.0.0-beta.1 (2023-04-04)

Bug Fixes

• many type issues (d5ade30), closes #527
• update packages and fix issues (13050de)

7.0.0-beta.0 (2022-10-12)

Bug Fixes

• use separate svg component and fix all type errors (9accd0b)

Features

• migrate to common element component instead of elemental components (8aaf611)
• redo type system to bring types into their svelte files (61b9395)
• update to mdc-web 14, implement new features and fixes (cca1827)

6.1.4 (2022-09-27)

Bug Fixes

• update svelte-strip for module script lang fix (2dc89a9)

6.1.0 (2022-08-20)

Note: Version bump only for package @smui/chips

6.0.0 (2022-07-23)

Bug Fixes

• add type="button" on chip action to prevent form submit (29d91ed)
• update sveltekit and fix package.json (9dfb3d0), closes #425
• upgrade packages and fix issues with new versions (67f45cc)

6.0.0-beta.16 (2022-04-11)

Note: Version bump only for package @smui/chips

6.0.0-beta.15 (2022-03-02)

Note: Version bump only for package @smui/chips

6.0.0-beta.14 (2022-02-13)

Bug Fixes

• update to latest packages, sveltekit and fix issues (ca21255)

Features

• update SvelteKit and move types to separate imports (5fb1216)

6.0.0-beta.13 (2022-01-05)

Bug Fixes

• import everything from material correctly. replace announce function with own implementation (7ac0383)

6.0.0-beta.12 (2022-01-05)

Bug Fixes

• correct entries in package.json files, noExternal config no longer needed (95c56b5), closes #375

6.0.0-beta.11 (2021-12-29)

Note: Version bump only for package @smui/chips

6.0.0-beta.10 (2021-12-28)

Note: Version bump only for package @smui/chips

6.0.0-beta.9 (2021-12-15)

Note: Version bump only for package @smui/chips

6.0.0-beta.8 (2021-12-14)

Note: Version bump only for package @smui/chips

6.0.0-beta.7 (2021-12-14)

Note: Version bump only for package @smui/chips

6.0.0-beta.6 (2021-12-11)

Note: Version bump only for package @smui/chips

6.0.0-beta.5 (2021-12-10)

Note: Version bump only for package @smui/chips

6.0.0-beta.4 (2021-11-25)

Note: Version bump only for package @smui/chips

6.0.0-beta.3 (2021-11-24)

Bug Fixes

• include svelte tsconfig from common module (2cfc838)

6.0.0-beta.2 (2021-11-17)

Note: Version bump only for package @smui/chips

6.0.0-beta.1 (2021-11-17)

Bug Fixes

• lock to last good ts minor version, add index files for repl (d77c735)

6.0.0-beta.0 (2021-11-17)

Bug Fixes

• get sass compiling for all packages (6405961)
• rm deprecation warn by updating to material 12 + breaking changes (e3e95e1)
• update other packages, move svelte to peerDependencies (2c1b137)
• use mdc-web's sass imports and include sass from dev packages (5ccdf53)

Features

• new package directory structure, include stripped svelte files so no preprocess needed (382e78d)
• remove styled endpoints and update readme and installation docs (c8755d4)
• rename MDC events to SMUI events (55effc6)
• upgrade mdc-web packages to v13 (9f0457f)

BREAKING CHANGES

• No more styled endpoints, so the advanced styling method now requires that you import the Sass yourself.

5.0.1 (2021-11-16)

Note: Version bump only for package @smui/chips

5.0.0 (2021-11-10)

Note: Version bump only for package @smui/chips

5.0.0-beta.8 (2021-11-02)

Note: Version bump only for package @smui/chips

5.0.0-beta.7 (2021-09-28)

Note: Version bump only for package @smui/chips

5.0.0-beta.6 (2021-09-27)

Bug Fixes

• lock sass to the last working minor release (62d4895), closes #334

5.0.0-beta.5 (2021-09-18)

Bug Fixes

• remove smui.d file and SMUIComponent declaration class (ef30919)

5.0.0-beta.4 (2021-09-17)

Bug Fixes

• use index.js endpoint within elements and internal for common package imports (cf76ed2)

5.0.0-beta.3 (2021-09-17)

Bug Fixes

• include extensions in import paths (3c06e33)
• material dom announce unable to import (c222858)
• undo announce fix, which was wrong (0e4c625)

Features

• remove bare endpoints (09ad6aa)

BREAKING CHANGES

• Bare endpoints in packages have been removed. You don't need them.

5.0.0-beta.1 (2021-09-14)

Bug Fixes

• correctly provide html attributes (048a11d)
• data table checkboxes and sorting (e88a19c)
• some type issues and simpler ambient declarations (44e2cea)

5.0.0-beta.0 (2021-09-14)

Bug Fixes

• make non-index import paths explicit (2821cb0)
• some more type errors (f4b8568)

Features

• add prop types for HTML props for components (f5c6e53)
• got sveltekit working local in dev (024b19a)
• implement js builds of all ts files (085b829)
• migrate chips to typescript (075f48a)
• migrate common and button to typescript (cf9c6af)
• migrate floating label, line ripple, and notched outline to typescript (f05373e)
• migrate tab, tab bar, tab indicator, and tab scroller to typescript (e5dc8a9)
• migrate textfield to typescript (0010211)

BREAKING CHANGES

• Renamed SMUI events from like SMUI:component:event to like SMUIComponent:event.
• Had to rename export "default" from Button to "defaultAction".

4.2.0 (2021-05-05)

Note: Version bump only for package @smui/chips

4.1.0 (2021-04-28)

Reverts

• Revert "v4.1.0" (54dfd48)
• Revert "v4.1.0" (3e683d9)

4.0.0 (2021-04-24)

Features

• remove style importing from index files, no more /bare (2ab900a)

3.1.0 (2021-04-22)

Features

• update to MDC 11, new fullscreen dialogs (ee962bc)

Reverts

• Revert "v3.1.0" (ade5890)

3.0.3 (2021-04-22)

Note: Version bump only for package @smui/chips

3.0.2 (2021-04-21)

Note: Version bump only for package @smui/chips

3.0.1 (2021-04-21)

Features

• implement fixes and workarounds for Vite and SvelteKit (9ed43aa)

Reverts

• Revert "v3.0.1" (d6a0858)

3.0.0 (2021-04-19)

Note: Version bump only for package @smui/chips

3.0.0-beta.12 (2021-04-18)

Note: Version bump only for package @smui/chips

3.0.0-beta.11 (2021-04-18)

Note: Version bump only for package @smui/chips

3.0.0-beta.10 (2021-04-17)

Features

• new Segmented Button component (4b1dc50)

3.0.0-beta.9 (2021-04-16)

Bug Fixes

• non-interactive chip text color (e673c93)
• primary action span missing from chips (17758af)

Features

• add nonInteractive chip set feature and fix chip tabindex management (c1f223f)
• new Tooltip component (6293aef)

3.0.0-beta.8 (2021-04-15)

Features

• forward all events, and only forward when bound, and allow modifiers (50a0db3)

3.0.0-beta.7 (2021-04-15)

Reverts

• Revert "docs: use absolute links in package readmes" (3392c16)

3.0.0-beta.6 (2021-04-14)

Note: Version bump only for package @smui/chips

3.0.0-beta.5 (2021-04-14)

Note: Version bump only for package @smui/chips

3.0.0-beta.4 (2021-04-12)

Note: Version bump only for package @smui/chips

3.0.0-beta.3 (2021-04-12)

Bug Fixes

• allow styles on components with ripples (1c6b28a)

3.0.0-beta.2 (2021-04-11)

Note: Version bump only for package @smui/chips

3.0.0-beta.1 (2021-04-11)

Note: Version bump only for package @smui/chips

3.0.0-beta.0 (2021-04-11)

Bug Fixes

• get element and pass events correctly (d405de5)

Features

• add getElement method to all components (f293cf3)
• updated Chips for MDC v10 (5ca1c05)
• updated Data Tables for MDC v10 (89cbd52)
• upgrade upstream MDC components to v10 (d47c59a)

BREAKING CHANGES

• Upgrading to v10 of upstream components. Their APIs will change. View the component READMEs.

2.0.0-beta.1 (2021-03-27)

Note: Version bump only for package @smui/chips

2.0.0-beta.0 (2021-01-01)

Features

• updated touch features for MDC 4 (b06e851)

2.0.0-alpha.0 (2020-12-31)

Bug Fixes

• filter chip leading icon wasn't hidden correctly (b011df9)
• fix buttons, ripples, and list item for new mdc (9b902b5)
• forward events from dynamic components correctly (5367449)

Features

• update chips to work with MDC 4 (2c28796)

BREAKING CHANGES

• Chips has several breaking changes listed in the migration docs.

1.1.0 (2020-12-24)

Note: Version bump only for package @smui/chips

1.0.0 (2020-08-04)

Note: Version bump only for package @smui/chips

1.0.0-beta.21 (2020-04-19)

Bug Fixes

• undefined current_component in browsers not supporting import #60 (708abd6)

1.0.0-beta.20 (2020-01-31)

Note: Version bump only for package @smui/chips

1.0.0-beta.19 (2019-12-13)

Bug Fixes

• prevent new Svelte versions from mangling MDC classes (8a94e95), closes #52

1.0.0-beta.18 (2019-11-08)

Note: Version bump only for package @smui/chips

1.0.0-beta.17 (2019-10-28)

Features

• update MDC package versions to 3.2.0 (605753d)

1.0.0-beta.16 (2019-09-24)

Note: Version bump only for package @smui/chips

1.0.0-beta.15 (2019-09-13)

Note: Version bump only for package @smui/chips

1.0.0-beta.14 (2019-09-07)

Bug Fixes

• fixed the packages' sass commands (97d64ea)

1.0.0-beta.13 (2019-09-06)

Features

• add bare js and css to all components (ebe7a6d)

1.0.0-beta.11 (2019-09-06)

Bug Fixes

• import styles correctly (37e6fa6)

1.0.0-beta.10 (2019-09-03)

Note: Version bump only for package @smui/chips

1.0.0-beta.8 (2019-08-30)

Note: Version bump only for package @smui/chips