Helix Components

CSS-first CRUK Helix components with optional React adapters.

Install

npm install @cruk/helix-components

CSS

Load one theme stylesheet per app:

import "@cruk/helix-components/index.css"; // CRUK default
import "@cruk/helix-components/themes/rfl.css";
import "@cruk/helix-components/themes/su2c.css";

The package includes the generated theme token CSS needed by these entrypoints. Consumers do not need to install a separate tokens package.

React

import "@cruk/helix-components/index.css";
import { Button, Heading, Paragraph } from "@cruk/helix-components/react";

export function Example() {
  return (
    <>
      <Heading level={1}>Donate today</Heading>
      <Paragraph>Help fund life-saving research.</Paragraph>
      <Button>Continue</Button>
    </>
  );
}

CSS-First Contracts

Use the root package for public class-name contracts:

import { linkClassNames } from "@cruk/helix-components";

Use the enhancement subpath only when a page needs framework-agnostic web component behavior:

import "@cruk/helix-components/enhance";