Skip to content
Hololink UI
Alpha

Hololink UI is under active development. Components, APIs and these docs may change without notice.

v0.2.0 · Native web components

Precise, accessible UI for any framework

Hololink UI is a library of native web components with design tokens, light and dark themes, and WCAG 2.2 AA as the baseline. Write HTML and ship in any stack.

Get startedBrowse componentsStorybook
pnpm add @philbob-sideprojects/hololink-ui
Custom elements
48
WCAG 2.2 target
AA
Themes, light and dark
2
Semantic design tokens
71

Principles

Platform first, framework never

Hololink UI uses what the browser already does well, and adds only the behaviour the platform is missing.

  • Native web components

    Standards-based custom elements with Shadow DOM. Use them in plain HTML, Vue, React, Angular, Astro or anything that renders DOM.

  • Accessible by default

    Built on native <dialog>, the Popover API and real form controls. Keyboard support, visible focus and 3:1 control boundaries are part of the contract.

  • Themed with tokens

    A two-tier token model of primitives and semantic roles. Rebrand by overriding --s-* custom properties, with no build step or forks.

  • Light and dark built in

    Every themed colour uses light-dark(). Components follow the OS preference, or you force a scheme with data-theme on any container.

  • Form-associated controls

    Text fields, checkboxes, switches and radios participate in native <form> submission and validation through ElementInternals.

  • Import only what you use

    Every component is its own entry point and registers itself on import, so bundles carry just the elements you render.

Developer experience

From import to interface in three lines

Register the elements you need, then write HTML. Attributes, events and slots work the same in every framework.

main.js
import '@philbob-sideprojects/hololink-ui/styles/global.css';
import '@philbob-sideprojects/hololink-ui/holo-button';
import '@philbob-sideprojects/hololink-ui/holo-text-field';
import '@philbob-sideprojects/hololink-ui/holo-switch';
index.html
<holo-text-field label="Email" type="email"></holo-text-field>
<holo-switch label="Product updates" checked></holo-switch>
<holo-button label="Subscribe"></holo-button>
Live result

Catalogue

Everything a product interface needs

Seven component families, each documented with live examples and an API reference.

Start building with Hololink UI

Install the package, load the tokens, and ship your first component in minutes.

Get startedOpen Storybook