{"id":13484881,"url":"https://github.com/novacbn/kahi-ui","last_synced_at":"2025-04-07T17:07:57.688Z","repository":{"id":40512247,"uuid":"307784506","full_name":"novacbn/kahi-ui","owner":"novacbn","description":"Straight-forward Svelte UI for the Web","archived":false,"fork":false,"pushed_at":"2023-05-21T08:59:01.000Z","size":9124,"stargazers_count":187,"open_issues_count":7,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T16:13:56.769Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://kahi-ui.nbn.dev","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/novacbn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-27T17:54:46.000Z","updated_at":"2024-10-21T14:28:32.000Z","dependencies_parsed_at":"2024-06-21T15:21:31.813Z","dependency_job_id":"1eafcfbc-45f4-4557-a031-53709a089687","html_url":"https://github.com/novacbn/kahi-ui","commit_stats":{"total_commits":447,"total_committers":2,"mean_commits":223.5,"dds":"0.16554809843400442","last_synced_commit":"1851a23a055f18176c34ae24e6f13deb241526a7"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fkahi-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fkahi-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fkahi-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fkahi-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/novacbn","download_url":"https://codeload.github.com/novacbn/kahi-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-07-31T17:01:37.499Z","updated_at":"2025-04-07T17:07:57.659Z","avatar_url":"https://github.com/novacbn.png","language":"Svelte","funding_links":[],"categories":["Svelte"],"sub_categories":[],"readme":"\u003e **NOTICE**: The development Kahi UI is currently on indefinite hiatus due to lack of time.\n\u003e \n\u003e Please seek alternatives if you don't want to use a currently unsupported library!\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://kahi-ui.nbn.dev\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/novacbn/kahi-ui/main/.assets/profile.png\" alt=\"Kahi UI Logo\" width=\"256\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eStraight-forward Svelte UI for the Web\u003c/h1\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/novacbn/kahi-ui/releases/latest\"\u003e\n        \u003cimg alt=\"Latest Release\" src=\"https://img.shields.io/github/v/tag/novacbn/kahi-ui?style=social\u0026display_name=tag\u0026logo=github\u0026label=Release\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@kahi-ui/framework\"\u003e\n        \u003cimg alt=\"NPM Package\" src=\"https://img.shields.io/npm/dm/@kahi-ui/framework.svg?style=social\u0026logo=npm\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/novacbn/kahi-ui/blob/main/LICENSE\"\u003e\n        \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/github/license/novacbn/kahi-ui?style=social\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/novacbn/kahi-ui/stargazers\"\u003e\n        \u003cimg alt=\"Github Stars\" src=\"https://img.shields.io/github/stars/novacbn/kahi-ui?style=social\u0026logo=github\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://kahi-ui.nbn.dev/chat\"\u003e\n        \u003cimg alt=\"Chat\" src=\"https://img.shields.io/discord/883717132532191255.svg?style=social\u0026logo=discord\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003e **WARNING**: This library is a work-in-progress, use at your own discretion!\n\n## Features\n\n-   **Svelte-first**: All Components are API designed to work well with Svelte as a first-class citizen.\n-   **Typescript Native**: Kahi UI tries to be fully typed by using TypeScript as its base language, so you get a complete IDE experience.\n-   **Progressive Enhancements**: Where possible, most logic is codified via CSS / HTML directly. With Javascript-enabled UX enhancements enabled for compatible clients.\n-   **Composable**: While 30+ prebuilt Components are available, Kahi UI also provides primitives to design your Web Application's UI without touching CSS.\n-   **Dark Mode**: Components in Kahi UI change colors when a compatible Browser views w/ Dark Mode.\n-   **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.\n\n## Documentation\n\n\u003e Looking for documentation source? Visit [github.com/kahi-framework/kahi-ui.nbn.dev](https://github.com/kahi-framework/kahi-ui.nbn.dev).\n\nVisit the documentation at [kahi-ui.nbn.dev](https://kahi-ui.nbn.dev).\n\n## Playground\n\nWant to just mess around and share Kahi UI creations? Visit the playground at [kahi-ui.nbn.dev/playground](https://kahi-ui.nbn.dev/playground).\n\n## F.A.Q.\n\nVisit the F.A.Q (frequently asked questions) at [kahi-ui.nbn.dev/docs/resources/faq](https://kahi-ui.nbn.dev/docs/resources/faq).\n\n## Need Help?\n\nFile [a new issue](https://github.com/novacbn/kahi-ui/issues/new/choose) or visit the official [Discord Server](https://kahi-ui.nbn.dev/chat).\n\n## Want to Contribute?\n\nVisit the [`CONTRIBUTING.md`](./CONTRIBUTING.md) for information on getting started.\n\n## Browser Support\n\n-   Chrome 88+ — January 2021\n-   Edge 88+ — January 2021\n-   Firefox 84+ — December 2020\n-   Safari 14.1+ — April 2021\n-   Edge _(Pre Chromium)_ — **UNSUPPORTED**\n-   Internet Explorer — **UNSUPPORTED**\n\n## Installation\n\nOpen your terminal and install via `npm`:\n\n```bash\nnpm install @kahi-ui/framework\n```\n\n## Usage\n\n**Step 1** — First if your toolchain supports it, import the required CSS files from `@kahi-ui/framework/dist`:\n\n```javascript\n// For non-minified:\nimport \"@kahi-ui/framework/dist/kahi-ui.framework.css\";\nimport \"@kahi-ui/framework/dist/kahi-ui.theme.default.css\";\n\n// For minified:\nimport \"@kahi-ui/framework/dist/kahi-ui.framework.min.css\";\nimport \"@kahi-ui/framework/dist/kahi-ui.theme.default.min.css\";\n```\n\nOtherwise download the required CSS files from [Releases](https://github.com/novacbn/kahi-ui/releases/latest) and use `\u003clink rel=\"stylesheet\"\u003e`:\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003c!-- For non-minified: --\u003e\n        \u003clink rel=\"stylesheet\" href=\"/path/to/kahi-ui.framework.css\" /\u003e\n        \u003clink rel=\"stylesheet\" href=\"/path/to/kahi-ui.theme.default.css\" /\u003e\n\n        \u003c!-- For minified: --\u003e\n\n        \u003clink rel=\"stylesheet\" href=\"/path/to/kahi-ui.framework.min.css\" /\u003e\n        \u003clink rel=\"stylesheet\" href=\"/path/to/kahi-ui.theme.default.min.css\" /\u003e\n    \u003c/head\u003e\n\u003c/html\u003e\n```\n\n**Step 2** — Next, import Components by their variable name from `@kahi-ui/framework`:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Button, Text} from \"@kahi-ui/framework\";\n\n    let clicks = 0;\n\n    function on_click(event) {\n        clicks++;\n    }\n\u003c/script\u003e\n\n\u003cText\u003e{clicks}\u003c/Text\u003e\n\u003cButton on:click={on_click}\u003eAdd +1\u003c/Button\u003e\n```\n\nSome Components are multi-part patterns, so you'll need to import their namespaces:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Button, Card, Text} from \"@kahi-ui/framework\";\n\u003c/script\u003e\n\n\u003cCard.Container\u003e\n    \u003cCard.Figure\u003e\n        \u003cimg src=\"/path/to/card/header/image.png\" /\u003e\n    \u003c/Card.Figure\u003e\n\n    \u003cCard.Header\u003e\n        Lorem Ipsum\n    \u003c/Card.Header\u003e\n\n    \u003cCard.Section\u003e\n        \u003cText\u003e\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci.\n            Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in\n            iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient\n            montes, nascetur ridiculus mus.\n        \u003c/Text\u003e\n    \u003c/Card.Section\u003e\n\n    \u003cCard.Footer\u003e\n        \u003cButton palette=\"affirmative\"\u003eOpen Details\u003c/Button\u003e\n    \u003c/Card.Footer\u003e\n\u003c/Card.Container\u003e\n```\n\n## Resources\n\nIf 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).\n\n## License\n\nKahi UI is licensed under the [MIT license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovacbn%2Fkahi-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovacbn%2Fkahi-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovacbn%2Fkahi-ui/lists"}