Helix

Angular UI component ecosystem by Gravion Labs: vanilla, signal-based components on design tokens with plain CSS (@gravionlabs/helix-ui), an application shell, dynamic forms from Zod schemas, and AG Grid helpers.

Packages

Package	Description
@gravionlabs/helix-shell	Application shell: layout (topbar, nav rail, footer), auth pages, landing widgets, layout signal store, and form infrastructure.
@gravionlabs/helix-zod	Zod v4 adapter: reactive-forms validator bridge and dynamic forms from annotated Zod schemas.
@gravionlabs/helix-ag-grid	AG Grid helpers: value formatters, number parsers, and cell styles.
@gravionlabs/helix-ui	Vanilla Angular components on the Helix tokens (plain CSS, no PrimeNG): button, form controls, select, divider, tooltip, breadcrumb, password, select button.

The documentation is published at gravionlabs.github.io/helix (built from docs/ by apps/site). The workspace also contains apps/helix-demo, the showcase application used for development — live at gravionlabs.github.io/helix/demo/.

Quick Start

npm install @gravionlabs/helix-ui

/* styles.css: the components and the tokens they read */
@import "@gravionlabs/helix-ui/styles.css";
@import "@gravionlabs/helix-ui/tokens.css";

import { HxButton } from '@gravionlabs/helix-ui';

<button hx-button type="button">Save</button>

Theming runs on CSS custom properties (--h-*): tokens.css is Helix's own look (the neutral greys of the sibling sites, indigo primary, Inter; see ADR 0001), dark mode and the primary colour are switched with provideHxTheme:

// app.config.ts
import { provideHxTheme } from '@gravionlabs/helix-ui';

export const appConfig: ApplicationConfig = {
  providers: [provideHxTheme({ storageKey: 'my-app-theme' })],
};

Agent skills

Run apm install before working in this repo. It installs the Angular agent skills declared in apm.yml. The skill folders are git-ignored, so a fresh clone has none. Requires apm.

Documentation

Browse it as a website at gravionlabs.github.io/helix, or read the Markdown here:

• Component docs — one page per @gravionlabs/helix-ui component
• helix-shell API reference
• Helix UI — the component library: install, theming, validators, rules
• Theming — the Helix tokens, dark mode, overriding tokens, static token export
• Design System — the generated brand book, tokens and component previews
• Roadmap
• Architecture decision records
• File structure conventions

Development

Requires Node ≥ 24 and pnpm.

pnpm install
pnpm start          # Build libs + serve the demo app
pnpm build:lib      # Build all libraries (ui, shell, zod, ag-grid) (ends with pnpm tokens:export → dist/tokens/)
pnpm test:lib       # Run library unit tests
pnpm lint           # biome + eslint + import guards

Attribution & License

MIT. The design token values derive from the Aura preset of PrimeNG / PrimeUIX (PrimeTek, MIT) and from Tailwind CSS (MIT); see projects/tokens/NOTICE.