{"id":13722996,"url":"https://github.com/vikignt/svelte-mui","last_synced_at":"2025-04-07T05:06:17.579Z","repository":{"id":49527677,"uuid":"201054286","full_name":"vikignt/svelte-mui","owner":"vikignt","description":"Simple Svelte 3 UI components","archived":false,"fork":false,"pushed_at":"2024-09-17T20:39:28.000Z","size":333,"stargazers_count":317,"open_issues_count":23,"forks_count":38,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-31T04:03:34.308Z","etag":null,"topics":["material","svelte","svelte-mui","svelte-ui","sveltejs","ui"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikignt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2019-08-07T13:17:38.000Z","updated_at":"2025-01-10T09:32:49.000Z","dependencies_parsed_at":"2024-01-06T01:13:23.032Z","dependency_job_id":"0c14f56a-bbd0-4722-b058-56b7cc2992ea","html_url":"https://github.com/vikignt/svelte-mui","commit_stats":{"total_commits":154,"total_committers":10,"mean_commits":15.4,"dds":"0.12337662337662336","last_synced_commit":"311730b083f5112d6c9ba41d246cbb9a8e531710"},"previous_names":["vikignt/svelte-ui"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikignt%2Fsvelte-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikignt%2Fsvelte-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikignt%2Fsvelte-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikignt%2Fsvelte-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikignt","download_url":"https://codeload.github.com/vikignt/svelte-mui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595332,"owners_count":20963943,"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","svelte","svelte-mui","svelte-ui","sveltejs","ui"],"created_at":"2024-08-03T01:01:35.318Z","updated_at":"2025-04-07T05:06:17.562Z","avatar_url":"https://github.com/vikignt.png","language":"Svelte","funding_links":[],"categories":["components and libraries","Svelte"],"sub_categories":["ui component sets"],"readme":"# svelte-mui\n\nSet of the UI components for [Svelte](https://svelte.dev) (~33 KB minzipped), inspired by Google's [Material Design](https://material.io/design/)\n\n[View the demo](https://svelte-mui.now.sh)\n\n## Installation\n\n_Note that you will need to have [Node.js](https://nodejs.org) installed_\n\n```bash\nnpm install --save-dev svelte-mui\n```\n\n## Usage\n\n```html\n\u003cTextfield bind:value filled label=\"Name\" message=\"Enter your name\" /\u003e\n\n\u003ch1\u003eHello {value}!\u003c/h1\u003e\n\n\u003cscript\u003e\n    // import any components you want\n    import { Textfield } from 'svelte-mui';\n\n    let value = 'world';\n\u003c/script\u003e\n```\n\nThis code on the [Svelte REPL](https://svelte.dev/repl/dfec17bd888749a1b76fa950df40f5dd?version=3.18.1)\n\n## Quick start with new project\n\nCreate a new project based on [sveltejs/template](https://github.com/sveltejs/template)\n\n```bash\nnpx degit sveltejs/template svelte-app\ncd svelte-app\nnpm install\n```\n\nAdd components\n\n```bash\nnpm install --save-dev svelte-mui\n```\n\nModify file `src/App.svelte` in the following way\n\n```html\n\u003cscript\u003e\n    // import any components\n    import { Button, Checkbox } from 'svelte-mui';\n\n    let checked = true;\n\u003c/script\u003e\n\n\u003cCheckbox bind:checked\u003eCheckbox\u003c/Checkbox\u003e\n\n\u003cp\u003eCheckbox is {checked ? 'checked' : 'unchecked'}\u003c/p\u003e\n\n\u003cButton\n    outlined\n    shaped\n    color=\"Red\"\n    on:click={() =\u003e { checked = !checked }}\n\u003e\n    Inverse\n\u003c/Button\u003e\n```\n\n...then start [Rollup](https://rollupjs.org/)\n\n```bash\nnpm run dev\n```\n\nNavigate to [localhost:8080](http://localhost:8080)\n\nFor real applications, you have to add global styles to `disabled` state\n\n```css\n    .disabled,\n    [disabled] {\n        opacity: 0.5;\n        pointer-events: none;\n    }\n\n    .disabled .disabled,\n    .disabled [disabled],\n    [disabled] .disabled,\n    [disabled] [disabled] {\n        opacity: 1;\n    }\n```\n\n## Get started with an example\n\nClone repo [vikignt/svelte-mui](https://github.com/vikignt/svelte-mui.git)\n\n```bash\ngit clone https://github.com/vikignt/svelte-mui.git\n```\n\nThen explore the __example__\n\n```bash\ncd svelte-mui/example\nnpm install\nnpm run dev\n```\n\nNavigate to [localhost:5000](http://localhost:5000)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikignt%2Fsvelte-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikignt%2Fsvelte-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikignt%2Fsvelte-mui/lists"}