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: `<gr-badge>New</gr-badge>`,
})
export class Example {}

Set up the styles

The two editions handle styling differently on the npm path:

React ships a pre-compiled stylesheet with the design tokens and every component's styles in one file. Import it once and you do not need Tailwind, a @theme import, or any @source config.
Angular components emit Tailwind utility classes and ship no compiled CSS, so the npm path requires Tailwind CSS v4 in your project. You import the tokens theme and point Tailwind at the @gremorie packages in node_modules with an @source line, so their utilities are compiled into your CSS.

// app/layout.tsx (Next.js) or src/main.tsx (Vite) - once, in your app entry
import '@gremorie/react/styles.css';

/* src/styles.css - requires Tailwind CSS v4 */
@import 'tailwindcss';
@import '@gremorie/tokens/theme.css';

/* Tailwind v4 ignores node_modules by default; this line makes it scan the
   Gremorie packages so their utility classes end up in your compiled CSS. */
@source '../node_modules/@gremorie';

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 bundles every component category (forms, display, overlays, feedback, navigation, containers, data, AI). @gremorie/angular currently bundles six categories (core, AI, display, containers, data, and feedback); forms, overlays, navigation, and artifacts ship as separate @gremorie/ng-* packages. 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 React category ships the same pre-compiled @gremorie/rx-core/styles/globals.css for its tokens.

That is the entire npm setup: install, set up the styles, 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), and for the Angular npm path. The React npm path ships pre-compiled CSS and does not require Tailwind.
An Angular 21+ project 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. Registry coverage differs today: the React registry covers the full catalog, while the Angular registry is still growing. Run npx gremorie list to see what is available per edition.

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 detects your package manager, installs the core dependencies (the tokens and framework core packages plus class-variance-authority, clsx, and tailwind-merge), adds the theme import to your global stylesheet, and prints the next steps.

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/tokens/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 the item's target path (src/components/gremorie/<category>/<name>/ for React, src/app/gremorie/<name>/ for Angular) and lists the peer packages you need to install.

Use it

import { Component } from '@angular/core';
import { Button } from './gremorie/button/button';

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

import { Button } from '@/components/gremorie/forms/button/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.

Installation

On this page