public-ui-kolibri

# KoliBri - Solid-Adapter [](https://www.npmjs.com/package/@public-ui/components) [](https://github.com/public-ui/kolibri/blob/main/LICENSE) [](https://www.npmjs.com/package/@public-ui/solid) [](https://github.com/public-ui/kolibri/issues) [](https://github.com/public-ui/kolibri/pulls) [](https://bundlephobia.com/result?p=@public-ui/solid)  ## Motivation Provide an adapter for [SolidJS](https://www.solidjs.com/) to use the KoliBri components. ## Installation You can install the adapter with `npm`, `pnpm` or `yarn`: ```bash npm i @public-ui/solid pnpm i @public-ui/solid yarn add @public-ui/solid ``` ## Usage First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/solid) and create a Solid root: ```ts import { defineCustomElements } from '@public-ui/components/loader'; import { register } from '@public-ui/components'; import { DEFAULT } from '@public-ui/solid'; register(DEFAULT, defineCustomElements) .then(() => { const htmlDivElement: HTMLDivElement | null = document.querySelector('div#app'); if (htmlDivElement instanceof HTMLDivElement) { render(() => <AppComponent />, htmlDivElement); } }) .catch(console.warn); ``` Then, you can import any component from `@public-ui/solid` and render it within components: ```tsx import { Component } from 'solid-js'; import { KolButton } from '@public-ui/solid'; export const AppComponent: Component = () => <KolButton _label="Hello World" />; ``` For customization options read the [default theme README](../../themes/default/README.md).