{"id":13449786,"url":"https://github.com/matyunya/smelte","last_synced_at":"2025-05-14T11:09:39.024Z","repository":{"id":35892818,"uuid":"194042226","full_name":"matyunya/smelte","owner":"matyunya","description":"UI framework with material components built with Svelte and Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-02-17T13:34:49.000Z","size":2290,"stargazers_count":1532,"open_issues_count":110,"forks_count":113,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-13T12:41:23.997Z","etag":null,"topics":["material","material-design","svelte","svelte-v3","tailwindcss"],"latest_commit_sha":null,"homepage":"https://smeltejs.com/","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/matyunya.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":["matyunya"],"patreon":"matyunya","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-06-27T07:11:19.000Z","updated_at":"2025-04-07T05:33:22.000Z","dependencies_parsed_at":"2025-03-09T00:22:45.346Z","dependency_job_id":"ea91961f-46ed-48e8-98d9-1678924dea8d","html_url":"https://github.com/matyunya/smelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matyunya%2Fsmelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matyunya%2Fsmelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matyunya%2Fsmelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matyunya%2Fsmelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matyunya","download_url":"https://codeload.github.com/matyunya/smelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129489,"owners_count":22019628,"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","svelte","svelte-v3","tailwindcss"],"created_at":"2024-07-31T06:00:56.071Z","updated_at":"2025-05-14T11:09:39.002Z","avatar_url":"https://github.com/matyunya.png","language":"Svelte","funding_links":["https://github.com/sponsors/matyunya","https://patreon.com/matyunya"],"categories":["Svelte","components and libraries","Running the update","UI Libraries"],"sub_categories":["ui component sets","By Popularity","Mobile"],"readme":"# Smelte\n\n\u003ca href=\"https://smeltejs.com/\"\u003e\u003cimg src=\"./static/logo.svg\" alt=\"Smelte logo\" width=\"192\"\u003e\u003c/a\u003e\n\n[![license](https://img.shields.io/npm/l/smelte.svg)](https://img.shields.io/npm/l/smelte.svg)\n[![downloads](https://img.shields.io/npm/dm/smelte.svg)](https://img.shields.io/npm/dm/smelte.svg)\n[![version](https://img.shields.io/npm/v/smelte.svg)](https://img.shields.io/npm/v/smelte.svg)\n[![Discord Chat](https://img.shields.io/discord/671589733356535818.svg)](https://discord.gg/nZc64MMdkU)\n\n[Demo](http://smeltejs.com/)\n\nSmelte is a UI framework built on top of Svelte and Tailwind CSS using Material Design spec (hence the name).\nIt comes with many components and utility functions making it easy to build beautiful responsive layouts while keeping\nbundle size and performance at check all thanks to Svelte.\n\n### Installation\n\nTo get you started you need to add Smelte to your dependencies with your favorite package manager\n\n```\n$ npm install smelte\n```\n\nor\n\n```\n$ yarn add smelte\n```\n\nThen add the Smelte Rollup plugin (after svelte but before css). Webpack support coming soon.\n\n```js\nconst smelte = require(\"smelte/rollup-plugin-smelte\");\n\nplugins = [\n  ...your plugins,\n  smelte({\n    purge: production,\n    output: \"public/global.css\", // it defaults to static/global.css which is probably what you expect in Sapper\n    postcss: [], // Your PostCSS plugins\n    whitelist: [], // Array of classnames whitelisted from purging\n    whitelistPatterns: [], // Same as above, but list of regexes\n    tailwind: {\n      theme: {\n        extend: {\n          spacing: {\n            72: \"18rem\",\n            84: \"21rem\",\n            96: \"24rem\"\n          }\n        }\n      }, // Extend Tailwind theme\n      colors: {\n        primary: \"#b027b0\",\n        secondary: \"#009688\",\n        error: \"#f44336\",\n        success: \"#4caf50\",\n        alert: \"#ff9800\",\n        blue: \"#2196f3\",\n        dark: \"#212121\"\n      }, // Object of colors to generate a palette from, and then all the utility classes\n      darkMode: true,\n    }, // Any other props will be applied on top of default Smelte tailwind.config.js\n  }),\n]\n```\n\nThen you should add Tailwind utilites CSS in your app component.\n\n```js\nimport \"smelte/src/tailwind.css\";\n```\n\nYou might also need to include material icons in your template's \u003chead\u003e if you use any:\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\nOr ship them along with Roboto if you would like to use default material font\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons\u0026display=swap\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\nAnd you're good to go and have all the Tailwind CSS power all to yourself!\n\nFor treeshaking to work it is recommended to import each component on its own like this:\n\n```js\nimport Button from \"smelte/src/components/Button\";\nimport Treeview from \"smelte/src/components/Treeview\";\n```\n\n### Components\n\n- [x] Text field\n- [x] Button\n- [x] Select\n- [x] Checkbox\n- [x] Radio\n- [x] List\n- [x] Chip\n- [x] Menu\n- [x] Navigation drawer\n- [x] Snackbar\n- [x] Dialog\n- [x] Card\n- [x] Slider\n- [x] Proper customization via class props\n- [x] Data table\n- [x] Autocomplete\n- [x] Tooltip\n- [x] Revise events (on:change, on:focus, on:input...)\n- [x] Treeview\n- [x] Date picker\n\n### Features\n\n- [x] Default typography per Material design spec\n- [x] Material icons\n- [x] CSS ripple animation\n- [x] Image lazy loading\n- [x] Now SSR deployment\n- [x] Color palette generator\n- [x] Improve Purge CSS\n- [x] Theming\n- [x] Image processing (done [here](https://github.com/matyunya/svelte-image))\n- [x] Svelte template (without Sapper)\n- [x] JS ripple animation\n- [x] Dark mode\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatyunya%2Fsmelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatyunya%2Fsmelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatyunya%2Fsmelte/lists"}