smelte

by matyunya

matyunya /smelte

UI framework with material components built with Svelte and Tailwind CSS

614 Stars 49 Forks Last release: Not found MIT License 525 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Smelte

Smelte logo

license downloads version Discord Chat

Demo

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 you need to add Smelte Rollup plugin (Webpack is on its way).

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.

import "smelte/src/tailwind.css";

You might also need to include material icons in your template's

if you use any:

Or ship them along with Roboto if you would like to use default material font


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:

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)
  • [x] Svelte template (without Sapper)
  • [x] JS ripple animation
  • [x] Dark mode

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.