Installation

Gremorie ships two ways — pick whichever fits your project:

As npm packages (versioned) — npm i @gremorie/react. The code lives in node_modules and you get updates with npm update. Best when you want one source of truth shared across projects.
As source via the registry (copy-paste) — npx gremorie add <name>. Each primitive becomes a file you own and can edit. Best when you want full control over the code.

Install as a package (npm)

The fastest start: install the complete edition in one package and import any primitive. Tree-shaking keeps only what you use in the final bundle.

npm i @gremorie/react

npm i @gremorie/angular

Then import components directly from the package:

import { Button, Card, CardHeader, CardTitle } from '@gremorie/react';

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello, Gremorie</CardTitle>
      </CardHeader>
      <Button>Ship it</Button>
    </Card>
  );
}

import { Component } from '@angular/core';
import { Badge } from '@gremorie/angular';

@Component({
  standalone: true,
  imports: [Badge],
  template: `<gn-badge>New</gn-badge>`,
})
export class Example {}

Add the stylesheet once, in your app's entry file (root layout.tsx, main.tsx, or wherever you load global CSS). It is pre-compiled and ships the design tokens and every component's styles in one file — so on the npm path you do not need Tailwind, a @theme import, or any @source config. One import and components render fully styled (brand color, radius, dark mode).

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import '@gremorie/react/styles.css';

/* src/styles.css — Angular component styles ship with the package; this
   line adds the design tokens. */
@import 'tailwindcss';
@import '@gremorie/ng-core/styles/theme.css';

Next.js App Router: Gremorie components are interactive (they use React context and state), so render them from a Client Component — add "use client" at the top of the file (or a parent) that uses them.

@gremorie/react and @gremorie/angular bundle every component category (forms, display, overlays, feedback, navigation, containers, data, AI). Artifacts (Artifact, CodeBlock, WebPreview) are an optional add-on — install @gremorie/rx-artifacts when you need them. Prefer a smaller install? Add a single category instead: @gremorie/rx-forms, @gremorie/rx-display, @gremorie/rx-ai, and so on — each category ships the same pre-compiled @gremorie/rx-core/styles/globals.css for its tokens.

That is the entire npm setup: install, import the stylesheet, use the components. The CLI flow below is the copy-paste alternative where you own the source and compile it with your own Tailwind.

Copy-paste via the CLI (registry)

Prefer to own the source instead? Install the CLI and pull primitives into your project on demand — each one becomes a file you can edit freely.

Prerequisites

Node.js 20+ for the CLI runtime
Tailwind CSS v4 — required for the copy-paste/registry flow (the source you own is compiled by your Tailwind). The npm path ships pre-compiled CSS and does not require Tailwind.
An Angular 18+ project (Spartan-NG compatible) or a React 19 project (Next.js, Vite, Remix)

Both editions are published: React (@gremorie/react, @gremorie/rx-*) and Angular (@gremorie/angular, @gremorie/ng-*). They share the same registry schema, tokens, and corpus, so anything you learn here carries across.

Steps

Run the CLI in your project

The CLI reads your project's framework from package.json and writes primitives to a sensible default path. No global install needed.

npx gremorie@latest init

pnpm dlx gremorie@latest init

yarn dlx gremorie@latest init

bunx gremorie@latest init

init creates a gremorie.config.json at the repo root, registers the default output directory, and prints the detected framework.

Import the tokens

Gremorie tokens cascade through three layers (primitive, semantic, chart). The semantic layer is the only one components reference directly, so it must load before anything else.

/* src/styles.css */
@import 'tailwindcss';
@import '@gremorie/ng-core/styles/theme.css';

/* app/globals.css */
@import 'tailwindcss';
@import '@gremorie/rx-core/styles/globals.css';

The import declares --primary, --foreground, --background, and the chart palette as CSS variables. Switching data-theme on <html> updates every component in place.

Add your first primitive

Pick anything from the Components catalog. Button is the smallest useful example.

npx gremorie@latest add ng-button

npx gremorie@latest add rx-button

The CLI writes the source to your output directory (default: src/components/gremorie/), installs any peer deps, and prints the import path.

Use it

import { Component } from '@angular/core';
import { NgButton } from '@/components/gremorie/ng-button';

@Component({
  standalone: true,
  imports: [NgButton],
  template: `<ng-button (clicked)="onClick()">Ship it</ng-button>`,
})
export class MyComponent {
  onClick() {
    console.log('Hello, Gremorie.');
  }
}

import { Button } from '@/components/gremorie/rx-button';

export function MyComponent() {
  return (
    <Button onClick={() => console.log('Hello, Gremorie.')}>Ship it</Button>
  );
}

Verification

If the button renders styled (rounded, has the brand primary color in default variant), the install is working end to end: CLI -> source -> tokens -> render.

For the next step, see Your first component for a full five-minute tutorial that wires three primitives into a chat surface.