svexy-ui

Svexy UI

Note

This is an under development project. I have changed the whole library on the basis of design system.

It's a Svelete Component Library which is built using Tailwind CSS. This UI Library focuses on Structure of a Component not on designing it.

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/>

• Pass pill if want to rounded.
• Pass shadow if need shadow of same color.
• Pass href for <a> tag.
• Pass disabled for disabled Button

Useful Links

• POC Documentation
• Similiar to smelte
• Inspiration

Authors

• @theetherGit
• @etherCorps