Installation

The packages are private and live in GitHub Packages. One kit is the normal case.

1. Registry and token

Point the @twentyfirstmedia scope at GitHub Packages in your app's .npmrc and keep a token with read:packages in the environment as NPM_TOKEN.

ini

@twentyfirstmedia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

2. The kit

Install it with the CLI (it also sets up styles and the provider) or by hand:

pnpm dlx @twentyfirstmedia/ui init --kit halo --locale de-DE
# or
pnpm add @twentyfirstmedia/halo

3. Styles and provider

Import styles.css once. It brings the self-hosted fonts, the tokens (light, dark, density) and every component style; no data-kit attribute is needed.

tsx

import "@twentyfirstmedia/halo/styles.css";
import de from "@twentyfirstmedia/ui-core/labels/de.json";
import { UIProvider, Button } from "@twentyfirstmedia/halo";

export function App() {
  return (
    <UIProvider locale="de-DE" labels={de} theme="system">
      <Button variant="primary">Speichern</Button>
    </UIProvider>
  );
}

Tailwind v4

The kit ships a preset that maps every token to Tailwind and clears the default palette, so utilities can only use kit values.

css

@import "tailwindcss";
@import "@twentyfirstmedia/halo/tailwind.css";

Both kits in one app

Import @twentyfirstmedia/ui-core/themes.css instead (both kits, scoped under [data-kit="…"]) and switch with <UIProvider kit="pro"> or the attribute on <html>. Markup, props and state stay as they are.