Svelte UI components based on the super light-weight chota CSS framework.
When you decide to use Svelte in your projects, you expect very tiny bundles of code.
chota is a super light-weight CSS framework, which adds only ~3kb of gzipped code to your CSS bundle.
Svelte-chota is a UI kit for easily using chota in your Svelte projects.
- Svelte-chota documentation.
- chota documentation.
You should install two packages:
chota- css framework itselfsvelte-chota- Svelte components for chota
npm install -D chota svelte-chotaThen open the app root file (usually App.svelte) and add chota import at the top of a <script> block:
<script>
import 'chota';
...
</script>Just import the necessary components from the svelte-chota package in your components:
<script>
import {Input,Button} from 'svelte-chota';
</script>
<Input placeholder="What do you want?" /> <Button>Find</Button>You can use any on:eventname directive with any components:
<script>
import {Button} from 'svelte-chota';
let button_text = 'Hover me';
</script>
<Button
on:mouseenter={ e => button_text="Don't touch me!" }
on:mouseleave={ e => button_text="Ok, hover me again" }
>{button_text}</Button>Any attribute can be passed to the component, even the class attribute.
<script>
import {Card} from 'svelte-chota';
</script>
<Card class="is-rounded text-center" style="height:100px; width:100px" title="Hello">
<h1>Hey!</h1>
</Card>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent