Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/novacbn/kahi-ui
Straight-forward Svelte UI for the Web
https://github.com/novacbn/kahi-ui
component-library css css-framework design-system frontend html javascript kahi-ui svelte svelte-components sveltejs typescript typescript-definitions ui ui-components ui-kit ui-library web
Last synced: about 1 month ago
JSON representation
Straight-forward Svelte UI for the Web
- Host: GitHub
- URL: https://github.com/novacbn/kahi-ui
- Owner: novacbn
- License: mit
- Created: 2020-10-27T17:54:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-21T08:59:01.000Z (over 1 year ago)
- Last Synced: 2024-07-24T16:12:18.119Z (about 2 months ago)
- Topics: component-library, css, css-framework, design-system, frontend, html, javascript, kahi-ui, svelte, svelte-components, sveltejs, typescript, typescript-definitions, ui, ui-components, ui-kit, ui-library, web
- Language: Svelte
- Homepage: https://kahi-ui.nbn.dev
- Size: 8.7 MB
- Stars: 187
- Watchers: 4
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
> **NOTICE**: The development Kahi UI is currently on indefinite hiatus due to lack of time.
>
> Please seek alternatives if you don't want to use a currently unsupported library!
Straight-forward Svelte UI for the Web
> **WARNING**: This library is a work-in-progress, use at your own discretion!
## Features
- **Svelte-first**: All Components are API designed to work well with Svelte as a first-class citizen.
- **Typescript Native**: Kahi UI tries to be fully typed by using TypeScript as its base language, so you get a complete IDE experience.
- **Progressive Enhancements**: Where possible, most logic is codified via CSS / HTML directly. With Javascript-enabled UX enhancements enabled for compatible clients.
- **Composable**: While 30+ prebuilt Components are available, Kahi UI also provides primitives to design your Web Application's UI without touching CSS.
- **Dark Mode**: Components in Kahi UI change colors when a compatible Browser views w/ Dark Mode.
- **Framework Independent**: Even though Svelte-first, there is no hard toolchain dependencies required. You can just take the built CSS files and use with React or in a traditional SSR environment.
## Documentation
> Looking for documentation source? Visit [github.com/kahi-framework/kahi-ui.nbn.dev](https://github.com/kahi-framework/kahi-ui.nbn.dev).
Visit the documentation at [kahi-ui.nbn.dev](https://kahi-ui.nbn.dev).
## Playground
Want to just mess around and share Kahi UI creations? Visit the playground at [kahi-ui.nbn.dev/playground](https://kahi-ui.nbn.dev/playground).
## F.A.Q.
Visit the F.A.Q (frequently asked questions) at [kahi-ui.nbn.dev/docs/resources/faq](https://kahi-ui.nbn.dev/docs/resources/faq).
## Need Help?
File [a new issue](https://github.com/novacbn/kahi-ui/issues/new/choose) or visit the official [Discord Server](https://kahi-ui.nbn.dev/chat).
## Want to Contribute?
Visit the [`CONTRIBUTING.md`](./CONTRIBUTING.md) for information on getting started.
## Browser Support
- Chrome 88+ — January 2021
- Edge 88+ — January 2021
- Firefox 84+ — December 2020
- Safari 14.1+ — April 2021
- Edge _(Pre Chromium)_ — **UNSUPPORTED**
- Internet Explorer — **UNSUPPORTED**
## Installation
Open your terminal and install via `npm`:
```bash
npm install @kahi-ui/framework
```
## Usage
**Step 1** — First if your toolchain supports it, import the required CSS files from `@kahi-ui/framework/dist`:
```javascript
// For non-minified:
import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.css";
// For minified:
import "@kahi-ui/framework/dist/kahi-ui.framework.min.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.min.css";
```
Otherwise download the required CSS files from [Releases](https://github.com/novacbn/kahi-ui/releases/latest) and use ``:
```html
```
**Step 2** — Next, import Components by their variable name from `@kahi-ui/framework`:
```html
import {Button, Text} from "@kahi-ui/framework";
let clicks = 0;
function on_click(event) {
clicks++;
}
{clicks}
Add +1
```
Some Components are multi-part patterns, so you'll need to import their namespaces:
```html
import {Button, Card, Text} from "@kahi-ui/framework";
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Open Details
```
## Resources
If looking for resources like templates and community projects, visit the resources list at [kahi-ui.nbn.dev/docs/resources/official](https://kahi-ui.nbn.dev/docs/resources/official).
## License
Kahi UI is licensed under the [MIT license](./LICENSE).