AlexxNB / Svelte Chota
Licence: mit
Svelte UI components based on super lightweight chota CSS framework.
Stars: ✭ 157
Projects that are alternatives of or similar to Svelte Chota
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (+123.57%)
Mutual labels: ui-kit, ui-components, svelte
React Native Elements App
Demo app for React Native Elements (w/ React Native Web)
Stars: ✭ 1,159 (+638.22%)
Mutual labels: ui-kit, ui-components
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-64.97%)
Mutual labels: ui-kit, ui-components
Elm Ui
UI library for making web applications with Elm
Stars: ✭ 878 (+459.24%)
Mutual labels: ui-kit, ui-components
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+20973.25%)
Mutual labels: ui-kit, ui-components
Rn Components Kit
A series of commonly used react-native components
Stars: ✭ 79 (-49.68%)
Mutual labels: ui-kit, ui-components
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+347.13%)
Mutual labels: ui-kit, ui-components
Web Client
Generic Linked Data browser and UX component framework. Apache license.
Stars: ✭ 105 (-33.12%)
Mutual labels: ui-kit, ui-components
Mobiscroll
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
Stars: ✭ 1,510 (+861.78%)
Mutual labels: ui-kit, ui-components
React Virgin
The react-native UI Kit you've been looking for.
Stars: ✭ 1,523 (+870.06%)
Mutual labels: ui-kit, ui-components
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-88.54%)
Mutual labels: ui-kit, ui-components
Sugui Design System
A design system template for the SugUI components library based on styleguidist
Stars: ✭ 17 (-89.17%)
Mutual labels: ui-kit, ui-components
Vuestic Admin
Free and Beautiful Vue 3 Admin Template
Stars: ✭ 8,398 (+5249.04%)
Mutual labels: ui-kit, ui-components
Ui Libraries
A collection of UI Frameworks and their platform implementations.
Stars: ✭ 769 (+389.81%)
Mutual labels: ui-kit, ui-components
Vitamin Web
Decathlon Design System libraries for web applications
Stars: ✭ 70 (-55.41%)
Mutual labels: ui-kit, ui-components
Storefront Ui
Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with 💚 by Vue Storefront team and contributors.
Stars: ✭ 1,827 (+1063.69%)
Mutual labels: ui-kit, ui-components
Primitives
An open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @modulz.
Stars: ✭ 644 (+310.19%)
Mutual labels: ui-kit, ui-components
Class101 Ui
💅A React-based UI Component Library.
Stars: ✭ 102 (-35.03%)
Mutual labels: ui-kit, ui-components
svelte-chota
Svelte UI components based on the super light-weight chota CSS framework.
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.
Documentation
- Svelte-chota documentation.
- chota documentation.
Installation
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:
<script>
import 'chota';
...
</script>
Usage
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>
Events handlers
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>
Attributes
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>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].