Installation

Hololink UI is a set of framework-agnostic web components built with Stencil. Each component is a native custom element (<holo-button>, <holo-dialog> and so on). They work in plain HTML or in any framework that renders DOM.

Install the package

The package is published to GitHub Packages as @philbob-sideprojects/hololink-ui.

1. Point the @philbob-sideprojects scope at GitHub Packages. Add this to an .npmrc in your project root:

   .npmrc

   @philbob-sideprojects:registry=https://npm.pkg.github.com
   //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

   GitHub Packages requires authentication for npm installs, even for public packages. Use a personal access token with the read:packages scope, exported as GITHUB_TOKEN.

2. Install the package:

   pnpm
   sh pnpm add @philbob-sideprojects/hololink-ui
   npm
   sh npm install @philbob-sideprojects/hololink-ui
   yarn
   sh yarn add @philbob-sideprojects/hololink-ui

Load the global styles

The components read their colours, spacing, type and motion from CSS custom properties (design tokens). Load the global stylesheet once, at your app’s entry point. It defines the tokens and the utility classes:

import '@philbob-sideprojects/hololink-ui/styles/global.css';

Without it, components still register, but they lose their themed colours, spacing and type.

Register the components

Each component is its own entry point and defines its custom element when imported. Import only the ones you use:

import '@philbob-sideprojects/hololink-ui/holo-button';
import '@philbob-sideprojects/hololink-ui/holo-dialog';

The import path for each component matches its tag name. Child components (for example holo-tab and holo-tab-panel for holo-tabs) have their own entry points.

Bundlers

Prefer the per-component imports above when you use Vite or another modern bundler. The package also ships Stencil’s lazy loader (defineCustomElements()), but it dynamic-imports chunks by relative URL. Vite does not emit those chunks, so components loaded that way may never render in a production build.

Use a component

Once a component is registered, use it like any HTML element:

<holo-button label="Save changes" variant="primary"></holo-button>

Components emit CustomEvents prefixed with holo (for example holoClose on <holo-dialog>). Listen for them with addEventListener or your framework’s event binding. Form controls such as <holo-text-field> and <holo-checkbox> are form-associated, so their values submit with a surrounding <form>.

Light and dark themes

Themed colours use light-dark(), so components follow the user’s OS colour scheme by default. To force a scheme, set data-theme="light" or data-theme="dark" on <html> or on any container. See Theming and dark mode for re-branding with tokens.

Next steps

• Wire Hololink UI into your framework: Usage with frameworks.
• Learn the design tokens the components are built on.
• Browse the components in the sidebar. Each page has live examples and an API reference.
• Explore every state and variant in Storybook.