KoliBri Components

KoliBri Components is a production-ready library of accessible Web Components built with Stencil. It powers the KoliBri design system and ships as the @public-ui/components package for use in any modern web stack.

New here? Start with the documentation or the architecture overview.

Highlights

• Accessible by design: components are built with accessibility in mind.
• Framework-agnostic: standard Web Components that work everywhere.
• Theming-ready: consistent theming via KoliBri themes.
• Enterprise-friendly: stable APIs and clear upgrade guidance.

Installation

pnpm add @public-ui/components @public-ui/theme-default

Usage

Register the component set and a theme once during app bootstrap:

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);

Then use the components anywhere in your markup:

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

Framework adapters

For an improved developer experience, use the framework-specific adapters described in the framework guides.

Theming

KoliBri themes provide the visual layer for the components. The default theme is maintained in this repository; see the default theme guide to customize styles and tokens.