Skip to content

Svelte UI components based on super lightweight chota CSS framework.


Notifications You must be signed in to change notification settings


Repository files navigation


Svelte UI components based on the super light-weight chota CSS framework.

npm npm

Why chota?

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.



You should install two packages:

  • chota - css framework itself
  • svelte-chota - Svelte components for chota
npm install -D chota svelte-chota

Then open the app root file (usually App.svelte) and add chota import at the top of a <script> block:

    import 'chota';


Just import the necessary components from the svelte-chota package in your components:

    import {Input,Button} from 'svelte-chota';

<Input placeholder="What do you want?" /> <Button>Find</Button>

Events handlers

You can use any on:eventname directive with any components:

    import {Button} from 'svelte-chota';
    let button_text = 'Hover me';

    on:mouseenter={ e => button_text="Don't touch me!" }
    on:mouseleave={ e => button_text="Ok, hover me again" }


Any attribute can be passed to the component, even the class attribute.

    import {Card} from 'svelte-chota';

<Card class="is-rounded text-center" style="height:100px; width:100px" title="Hello">