Utility
Styling
COLIBRI
Colibri is a lightweight, customizable component library for Svelte apps. Our
goal is to provide you with a set of components for the majority of common use
cases, letting you build on top of that to realize your ideas without worrying
about finding or building basic interactive elements. We also want to give you
the flexibility to style the components however you want while keeping things
consistent for you.
Getting started
1. Install the library
$> npm install @thetinkerinc/colibri2. Import the base styles and a theme in your root +layout.svelte file
- You don't need to use SvelteKit to use Colibri, but for most apps it is recommended
- See available themes , or make your own
<script>
import { Themer } from '@thetinkerinc/colibri';
import theme from '@thetinkerinc/colibri/themes/colibri.js';
import '@thetinkerinc/colibri/styles/all.css';
</script>
<Themer {theme}>
<slot />
</Themer>
3. Start using components
<script>
import { Button } from '@thetinkerinc/colibri';
function handleClick() {
console.log("That's all there is to it!");
}
</script>
<Button on:click={handleClick}>Click me</Button>