utility components

Utilitarian component library written in Svelte, for Svelte

Table of Contents

• Title
• About
• Installation
• Tailwind CSS configuration
• Global styling
• Usage
• Components

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.

https://utilcomps.vercel.app