Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matyunya/smelte
UI framework with material components built with Svelte and Tailwind CSS
https://github.com/matyunya/smelte
material material-design svelte svelte-v3 tailwindcss
Last synced: 29 days ago
JSON representation
UI framework with material components built with Svelte and Tailwind CSS
- Host: GitHub
- URL: https://github.com/matyunya/smelte
- Owner: matyunya
- License: mit
- Created: 2019-06-27T07:11:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:13:02.000Z (almost 2 years ago)
- Last Synced: 2024-09-29T10:50:38.829Z (about 1 month ago)
- Topics: material, material-design, svelte, svelte-v3, tailwindcss
- Language: Svelte
- Homepage: https://smeltejs.com/
- Size: 2.18 MB
- Stars: 1,529
- Watchers: 23
- Forks: 114
- Open Issues: 110
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - Smelte - UI framework with material components built with Tailwind CSS. _(pre-v5)_ (UI Libraries / Mobile)
- tailwindcss-awesome - matyunya/smelte - UI framework with material components built with Svelte and Tailwind CSS <br/> (80 stars / 2021-02-24 / 693 commits ) (Running the update / By Popularity)
README
# Smelte
[](https://img.shields.io/npm/l/smelte.svg)
[](https://img.shields.io/npm/dm/smelte.svg)
[](https://img.shields.io/npm/v/smelte.svg)
[](https://discord.gg/nZc64MMdkU)
[Demo](http://smeltejs.com/)
Smelte is a UI framework built on top of Svelte and Tailwind CSS using Material Design spec (hence the name).
It comes with many components and utility functions making it easy to build beautiful responsive layouts while keeping
bundle size and performance at check all thanks to Svelte.
### Installation
To get you started you need to add Smelte to your dependencies with your favorite package manager
```
$ npm install smelte
```
or
```
$ yarn add smelte
```
Then add the Smelte Rollup plugin (after svelte but before css). Webpack support coming soon.
```js
const smelte = require("smelte/rollup-plugin-smelte");
plugins = [
...your plugins,
smelte({
purge: production,
output: "public/global.css", // it defaults to static/global.css which is probably what you expect in Sapper
postcss: [], // Your PostCSS plugins
whitelist: [], // Array of classnames whitelisted from purging
whitelistPatterns: [], // Same as above, but list of regexes
tailwind: {
theme: {
extend: {
spacing: {
72: "18rem",
84: "21rem",
96: "24rem"
}
}
}, // Extend Tailwind theme
colors: {
primary: "#b027b0",
secondary: "#009688",
error: "#f44336",
success: "#4caf50",
alert: "#ff9800",
blue: "#2196f3",
dark: "#212121"
}, // Object of colors to generate a palette from, and then all the utility classes
darkMode: true,
}, // Any other props will be applied on top of default Smelte tailwind.config.js
}),
]
```
Then you should add Tailwind utilites CSS in your app component.
```js
import "smelte/src/tailwind.css";
```
You might also need to include material icons in your template's if you use any:
```html
```
Or ship them along with Roboto if you would like to use default material font
```html
```
And you're good to go and have all the Tailwind CSS power all to yourself!
For treeshaking to work it is recommended to import each component on its own like this:
```js
import Button from "smelte/src/components/Button";
import Treeview from "smelte/src/components/Treeview";
```
### Components
- [x] Text field
- [x] Button
- [x] Select
- [x] Checkbox
- [x] Radio
- [x] List
- [x] Chip
- [x] Menu
- [x] Navigation drawer
- [x] Snackbar
- [x] Dialog
- [x] Card
- [x] Slider
- [x] Proper customization via class props
- [x] Data table
- [x] Autocomplete
- [x] Tooltip
- [x] Revise events (on:change, on:focus, on:input...)
- [x] Treeview
- [x] Date picker
### Features
- [x] Default typography per Material design spec
- [x] Material icons
- [x] CSS ripple animation
- [x] Image lazy loading
- [x] Now SSR deployment
- [x] Color palette generator
- [x] Improve Purge CSS
- [x] Theming
- [x] Image processing (done [here](https://github.com/matyunya/svelte-image))
- [x] Svelte template (without Sapper)
- [x] JS ripple animation
- [x] Dark mode