Public UI - Default-Theme

This is the default theme for the Public UI web component library. You can customize this theme by using css variables or by creating a new theme.

Integration in React

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

register(DEFAULT, defineCustomElements).then(() => {
    ReactDOM.createRoot(document.getElementById('root')!).render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
    );
});

Full documentation

👉 https://public-ui.github.io

Usage

The default theme is token based and works with minimal adjustments. It already contains all necessary styling and can be customized with design tokens using CSS Custom Properties.

Variables

Usage

Import and register the theme:

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

register(DEFAULT, defineCustomElements);

For more details and options see Getting started.

To adjust the design tokens, create a simple stylesheet that overrides the desired custom properties. You do not need to set every property—only those you want to change. Example:

:root {
    --kolibri-border-radius: 3px;
    --kolibri-font-size: 18px;
    --kolibri-spacing: 0.3rem;
    --kolibri-color-primary: #cc006e;
    --kolibri-color-primary-variant: #ff64b9;
}

Design Tokens

The following tokens are defined in src/global.scss and serve as the base for colors, fonts, and spacing across all components.