{"id":13484887,"url":"https://github.com/hperrin/svelte-material-ui","last_synced_at":"2025-05-13T15:02:55.876Z","repository":{"id":37545922,"uuid":"197286704","full_name":"hperrin/svelte-material-ui","owner":"hperrin","description":"Svelte Material UI Components","archived":false,"fork":false,"pushed_at":"2024-12-22T23:05:10.000Z","size":17734,"stargazers_count":3373,"open_issues_count":264,"forks_count":283,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-13T04:03:09.241Z","etag":null,"topics":["material","material-design","material-ui","svelte","svelte-components","svelte3","svelte4","sveltejs"],"latest_commit_sha":null,"homepage":"https://sveltematerialui.com/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hperrin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-07-17T00:36:53.000Z","updated_at":"2025-05-10T08:12:05.000Z","dependencies_parsed_at":"2024-01-06T01:11:44.255Z","dependency_job_id":"b96a9170-d1ae-424e-aea0-7d5567b6c0c4","html_url":"https://github.com/hperrin/svelte-material-ui","commit_stats":{"total_commits":1221,"total_committers":53,"mean_commits":"23.037735849056602","dds":0.0753480753480753,"last_synced_commit":"19ea8edba225a22fbfbeeb76030a0d0f9ee1f8e5"},"previous_names":[],"tags_count":121,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hperrin%2Fsvelte-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hperrin%2Fsvelte-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hperrin%2Fsvelte-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hperrin%2Fsvelte-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hperrin","download_url":"https://codeload.github.com/hperrin/svelte-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253957994,"owners_count":21990542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material","material-design","material-ui","svelte","svelte-components","svelte3","svelte4","sveltejs"],"created_at":"2024-07-31T17:01:37.668Z","updated_at":"2025-05-13T15:02:55.857Z","avatar_url":"https://github.com/hperrin.png","language":"Svelte","funding_links":[],"categories":["Svelte","material-design","components and libraries","UI Libraries","SCSS","Web Frontend"],"sub_categories":["ui component sets","Mobile","Svelte"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"packages/site/static/header-transparent.png\" alt=\"Svelte Material UI\" /\u003e\n\u003c/div\u003e\n\nA library of Svelte Material UI components, based on [Material Design Components - Web](https://github.com/material-components/material-components-web).\n\n# Demos, Code Samples, and Guides\n\nhttps://sveltematerialui.com\n\n# Features\n\nHere are some unique features that help SMUI stand out:\n\n- Full TypeScript support, including HTML attributes.\n- You can add arbitrary attributes to all of the components and many of the elements within them.\n- You can add actions to the components with `use={[Action1, [Action2, action2Props], Action3]}`.\n- You can add props to lower components and elements with \"$\" props, like `input$maxlength=\"15\"`.\n- SMUI [supports RTL languages](https://svelte.dev/repl/c2ff2d5dd5404eccb901ba04ef0161be).\n\n# Installation\n\nTo get started, check out the [installation docs](INSTALL.md) or the [SvelteKit docs](SVELTEKIT.md).\n\n# Need Help?\n\nIf you need help installing or using SMUI, join the [Discord server](https://discord.gg/aFzmkrmg9P).\n\n# Svelte 5\n\nSMUI v8 requires Svelte 5. This is the documentation for v8, which is still in development (and is currently in a prerelease state).\n\nIf you are using Svelte 4, you can use SMUI v7, which is the current stable version. Check out the [v7 branch](https://github.com/hperrin/svelte-material-ui/tree/v7) for the current docs.\n\n# Migration\n\nUpgrading from an old version? Be sure to read the [migration doc](MIGRATING.md).\n\nUpgrading from v7? You need Svelte 5. Event listeners no longer to use the CustomEvent type. Check out the [upgrade instructions](MIGRATING.md#smui-7---smui-8).\n\nUpgrading 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](MIGRATING.md#smui-6---smui-7).\n\nUpgrading 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](MIGRATING.md#smui-5---smui-6).\n\nUpgrading from v4? SMUI v5 requires the [TypeScript preprocessor](https://github.com/sveltejs/svelte-preprocess). SMUI v6 does not though, so if you upgrade straight to v6, don't worry. Check out the [upgrade instructions](MIGRATING.md#smui-4---smui-5).\n\nUpgrading from v3? SMUI's styling method has been simplified. Check out the [upgrade instructions](MIGRATING.md#smui-3---smui-4).\n\nUpgrading from v2? There are **lots** of changes listed in the [upgrade instructions](MIGRATING.md#smui-2---smui-3).\n\n# Old Docs\n\nYou can find older versions of the docs on their respective branch:\n\n- [v7 docs](https://github.com/hperrin/svelte-material-ui/tree/v7#readme)\n- [v6 docs](https://github.com/hperrin/svelte-material-ui/tree/v6#readme)\n- [v5 docs](https://github.com/hperrin/svelte-material-ui/tree/v5#readme)\n- [v4 docs](https://github.com/hperrin/svelte-material-ui/tree/v4#readme)\n\n# Icons\n\nYou can include icons in a number of ways, but the easiest is the [Material Icon Font](https://developers.google.com/fonts/docs/material_icons). This will give you the standard set of Material Icons, available with the CSS class \"material-icons\".\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\nHowever, 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.\n\nAnother option is the [Material Design Icons library](https://pictogrammers.com/library/mdi/). See the \"Using SVGs\" demo on the [Icon Button demo page](https://sveltematerialui.com/demo/icon-button) for instructions to use icons from the `@mdi/js` package (or any other SVG icons).\n\nYou can even use them in data URLs. To get a data URL for the icon:\n\n1. [Find your icon](https://pictogrammers.com/library/mdi/) and click \"Copy SVG\" button (it looks like `\u003c/\u003e`).\n2. [Base64 encode](https://www.base64encode.org/) the document.\n3. Format the URL like this `data:image/svg+xml;base64,encodedcontent`, replacing \"encodedcontent\" with the Base64 results.\n4. 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();`).\n\n# Components\n\nClick 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.)\n\n- [Accordion](packages/accordion/README.md)‡\n- Action Buttons\n  - [Button](packages/button/README.md)\n  - [Floating Action Button](packages/fab/README.md)\n  - [Icon Button](packages/icon-button/README.md)\n- App Bars\n  - [Bottom App Bar](packages/bottom-app-bar/README.md)‡\n  - [Top App Bar](packages/top-app-bar/README.md)\n- [Badge](packages/badge/README.md)‡\n- [Banner](packages/banner/README.md)\n- [Card](packages/card/README.md)\n- [Common](packages/common/README.md)\n- [Data Table](packages/data-table/README.md)\n- [Dialog](packages/dialog/README.md)\n- [Drawer](packages/drawer/README.md)\n- [Elevation](https://sveltematerialui.com/demo/elevation/)†\n- [Image List](packages/image-list/README.md)\n- Inputs and Controls\n  - [Autocomplete](packages/autocomplete/README.md)‡\n  - [Checkbox](packages/checkbox/README.md)\n  - [Chips](packages/chips/README.md)\n  - [Chip Input](packages/chip-input/README.md)‡\n  - [Floating Label](packages/floating-label/README.md)\n  - [Form Field](packages/form-field/README.md)\n  - [Line Ripple](packages/line-ripple/README.md)\n  - [Notched Outline](packages/notched-outline/README.md)\n  - [Radio Button](packages/radio/README.md)\n  - [Segmented Button](packages/segmented-button/README.md)\n  - [Select Menu](packages/select/README.md)\n    - [Select Helper Text](packages/select/helper-text/README.md)\n    - [Select Icon](packages/select/icon/README.md)\n  - [Slider](packages/slider/README.md)\n  - [Switch](packages/switch/README.md)\n  - [Text Field](packages/textfield/README.md)\n    - [Text Field Character Counter](packages/textfield/character-counter/README.md)\n    - [Text Field Helper Text](packages/textfield/helper-text/README.md)\n    - [Text Field Icon](packages/textfield/icon/README.md)\n- [Layout Grid](packages/layout-grid/README.md)\n- [List](packages/list/README.md)\n- [Menu Surface](packages/menu-surface/README.md)\n- [Menu](packages/menu/README.md)\n- [Paper](packages/paper/README.md)‡\n- Progress Indicators\n  - [Circular Progress](packages/circular-progress/README.md)\n  - [Linear Progress](packages/linear-progress/README.md)\n- [Ripple](packages/ripple/README.md)\n- [Snackbar](packages/snackbar/README.md)\n  - [Kitchen](packages/snackbar/kitchen/README.md)‡\n- Tabs\n  - [Tab](packages/tab/README.md)\n  - [Tab Bar](packages/tab-bar/README.md)\n- [Tooltip](packages/tooltip/README.md)\n- [Touch Target](packages/touch-target/README.md)\n- [Typography](https://sveltematerialui.com/demo/typography/)†\n\n\u003csub\u003e† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.\u003c/sub\u003e\n\n\u003csub\u003e‡ This is not an MDC-Web component (upstream library). It is an addition that SMUI provides.\u003c/sub\u003e\n\n- 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.)\n\n# License\n\nCopyright 2019-2024 Hunter Perrin\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhperrin%2Fsvelte-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhperrin%2Fsvelte-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhperrin%2Fsvelte-material-ui/lists"}