Utilcomps
utility components
Utilitarian component library written in Svelte, for Svelte
Table of Contents
About
Utilcomps is a utilitarian component library written in Svelte, for Svelte. The idea is to provide a functional set of common components that focus on being utilitarian, accessible, and functional, instead of being all too flashy. Inspired by classic software like Cinema 4D, Blender, and the Adobe Suite.
Installation
Installing utilcomps is very easy. Simply install it with your favorite JavaScript package manager.
npm install utilcomps
Tailwind CSS configuration
Tailwind CSS is the styling foundation for utilcomps. In order to get all correct styles, we provide a Tailwind CSS configuration object, that you can use to configure your local version of Tailwind CSS.
npm install twind
Set up Tailwind CSS (twind for example) in a top level file.
<script>
import { tailwindConfig } from 'utilcomps';
import { setup } from 'twind';
setup(tailwindConfig);
</script>
Global styling
In order to get utilcomps's components to look as good, and work as good, as possible. We reommend adding a couple of lines of global styling. For example, we designed utilcomps with the Inter font family, so we highly recommend you use it as well.
@import url('https://rsms.me/inter/inter.css');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
background-color: #323232;
}
Usage
Using utilcomps components is also very easy. Simple import a component of your choce from the utilcomps library inside of a script tag, and use it like any other Svelte component.
<script>
import { Button } from 'utilcomps';
</script>
<Button>Click me</Button>
Components
To see a full demo of all components in utilcomps, visit the webiste below.
