Components (Library)

This package contains the Stencil-based web components that power KoliBri. Each component ships in the @public-ui/components npm package.

Learn more about the architecture in the architecture concept and find additional guides on the documentation site.

Installation

Add the library to your project with pnpm:

pnpm add @public-ui/components

Usage

Register the components with a theme before using them:

import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/loader';
import { DEFAULT } from '@public-ui/theme-default';

register(DEFAULT, defineCustomElements).catch(console.error);

After registration you can use the elements in your markup:

<kol-button _label="Hello World"></kol-button>

Framework-specific adapters are available for improved developer experience. See the framework guides.

Development notes

• Temporarily remove elements in src/index.html while working on components.
  • Search for the component name with an uppercase letter.
  • Input components are located under "Form".
• Restore src/index.html or src/index.bak.html once your work is done.

Run pnpm --filter @public-ui/components build to build the library. During development you can start the live preview with pnpm start.

Development commands

• pnpm start – run the local dev server with live reload
• pnpm test – execute unit and snapshot tests
• pnpm lint – check the code base with ESLint and Stylelint

The component source README describes additional styling rules.

Repository structure

• src/components – each web component lives in its own folder.
• src/schema – TypeScript schema describing the API of every component.
• src/assets, src/locales and src/utils – shared assets, translations and utilities.

You can customize KoliBri by creating your own theme. See the default theme guide for details.