Svexy-ui NPM | npm.io

Svexy UI

Note

This is my first open source package. So please help me to make it best UI Library for Svelte. Everyone is invite to play and help me build this.

Getting started

Add following lines into your tailwind config

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors.js');
module.exports = {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/svexy-ui/components/**/*.{html,js,svelte,ts}'
	],
	theme: {
		colors: {
			gray: colors.gray,
			black: colors.black,
			white: colors.white,
			danger: colors.rose,
			info: colors.sky,
			warning: colors.amber,
			success: colors.teal,
			primary: colors.orange,
			secondary: colors.violet,
			tertiary: colors.rose
		},
		extend: {}
	},
	plugins: []
};

Do not change variable names.
You can config all the color as per your need but have to follow this method

How to use Button

let variants = 'solid', 'outlined', 'soft' : 'solid' is default.
let colors = 'primary', 'secondary', 'tertiary', 'dark', 'info', 'warning', 'danger', 'success' : 'primary' is default.
let sizes = 'xs', 'sm', 'md', 'lg', 'xl' : 'md' is default.

let variants = ['solid', 'outlined', 'soft'];
let colors = ['primary', 'secondary', 'tertiary', 'dark', 'info', 'warning', 'danger', 'success'];
<script>
  import Button from 'svexy-ui';
</script>
<Button variant={variant} color={color} shadow >Button<Button/>