Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/albingroen/utilcomps
🧱 Utilitarian component library written in Svelte, for Svelte
https://github.com/albingroen/utilcomps
components svelte tailwindcss
Last synced: 3 months ago
JSON representation
🧱 Utilitarian component library written in Svelte, for Svelte
- Host: GitHub
- URL: https://github.com/albingroen/utilcomps
- Owner: albingroen
- Created: 2021-09-08T21:50:28.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-07T10:58:30.000Z (over 3 years ago)
- Last Synced: 2024-11-14T13:39:55.827Z (3 months ago)
- Topics: components, svelte, tailwindcss
- Language: Svelte
- Homepage: https://utilcomps.vercel.app
- Size: 184 KB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# utility components
> Utilitarian component library written in Svelte, for Svelte
## Table of Contents
- [Title](#utility-components)
- [About](#about)
- [Installation](#installation)
- [Tailwind CSS configuration](#tailwind-css-configuration)
- [Global styling](#global-styling)
- [Usage](#usage)
- [Components](#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](https://www.maxon.net/en/cinema-4d), [Blender](https://www.blender.org),
and the [Adobe Suite](https://www.adobe.com).
## Installation
Installing utilcomps is very easy. Simply install it with your favorite
JavaScript package manager.
```sh
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.
```sh
npm install twind
```
Set up Tailwind CSS ([twind](https://twind.dev) for example) in a top level file.
```svelte
import { tailwindConfig } from 'utilcomps';
import { setup } from 'twind';
setup(tailwindConfig);
```
## 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](https://rsms.me/inter/), so
we highly recommend you use it as well.
```css
@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.
```svelte
import { Button } from 'utilcomps';
Click me
```
## Components
To see a full demo of all components in utilcomps, visit the webiste below.
[https://utilcomps.vercel.app](https://utilcomps.vercel.app)