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.
Visit the documentation at kahi-ui.nbn.dev.
Playground
Want to just mess around and share Kahi UI creations? Visit the playground at kahi-ui.nbn.dev/playground.
F.A.Q.
Visit the F.A.Q (frequently asked questions) at kahi-ui.nbn.dev/docs/resources/faq.
Need Help?
File a new issue or visit the official Discord Server.
Want to Contribute?
Visit the 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:
npm install @kahi-ui/frameworkUsage
Step 1 — First if your toolchain supports it, import the required CSS files from @kahi-ui/framework/dist:
// 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 and use <link rel="stylesheet">:
<html>
<head>
<!-- For non-minified: -->
<link rel="stylesheet" href="/path/to/kahi-ui.framework.css" />
<link rel="stylesheet" href="/path/to/kahi-ui.theme.default.css" />
<!-- For minified: -->
<link rel="stylesheet" href="/path/to/kahi-ui.framework.min.css" />
<link rel="stylesheet" href="/path/to/kahi-ui.theme.default.min.css" />
</head>
</html>Step 2 — Next, import Components by their variable name from @kahi-ui/framework:
<script>
import {Button, Text} from "@kahi-ui/framework";
let clicks = 0;
function on_click(event) {
clicks++;
}
</script>
<Text>{clicks}</Text>
<Button on:click={on_click}>Add +1</Button>Some Components are multi-part patterns, so you'll need to import their namespaces:
<script>
import {Button, Card, Text} from "@kahi-ui/framework";
</script>
<Card.Container>
<Card.Figure>
<img src="/path/to/card/header/image.png" />
</Card.Figure>
<Card.Header>
Lorem Ipsum
</Card.Header>
<Card.Section>
<Text>
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.
</Text>
</Card.Section>
<Card.Footer>
<Button palette="affirmative">Open Details</Button>
</Card.Footer>
</Card.Container>Resources
If looking for resources like templates and community projects, visit the resources list at kahi-ui.nbn.dev/docs/resources/official.
License
Kahi UI is licensed under the MIT license.