UX4G
Install

Add UX4G to your project

Two paths: install the npm packages, or copy a single component's source into your repo with the shadcn registry. Both rely on the same design tokens.

1. npm package

Install the React components and the tokens package side by side. 

pnpm add @hopline/ux4g-react @hopline/ux4g-tokens

Import the tokens stylesheet once, at the root of your app. This loads the fonts, colours, type scale and interaction layer for every component. 

import "@hopline/ux4g-tokens/styles.css";

Now import and use components anywhere. 

import { Button } from "@hopline/ux4g-react";

export function Apply() {
  return <Button variant="primary">Submit application</Button>;
}

2. shadcn registry

Prefer to own the source? Pull a single component into your repository with the shadcn CLI. From a local checkout of this repo: 

npx shadcn add ./registry/r/button.json

Or straight from the hosted registry (live now): 

npx shadcn add https://ux4g.pages.dev/r/button.json

Swap button for any component name. The registry includes all 41 components plus the tokens.

The one hard rule

Whichever path you choose, import the tokens stylesheet exactly once at your app root: 

import "@hopline/ux4g-tokens/styles.css";

Without it, components render unstyled. With it, everything stays themeable from a single set of CSS variables.