Skip to main content
Gremorie

Overview

The Gremorie component catalog - 83 primitives in 8 categories, shipped as React and Angular editions, installable via registry or npm.

AI

Inputs

Layout & display

Interaction

Gremorie ships 83 production primitives, from the everyday (Button, Dialog, Table) to a full AI surface vocabulary (PromptInput, Message, Reasoning, Artifact). Every component exists in two editions, React and Angular, with the same anatomy and the same prop contract, and every one is themed entirely through design tokens, so your brand applies without touching component code.

The eight categories

Two editions, one contract

Each component ships as a React edition (rx-*) and an Angular edition (ng-*). The two are not ports of convenience: they share a fixed anatomy tree and prop-parity contract, so a team that knows PromptInput in React can read the Angular template without relearning anything. The Gremorie workbench renders both editions side by side for every component, in every theme, which is how parity is validated before anything is published.

Every component page documents both editions in tabs; the anatomy tree near the top of each page is shared by both.

How to install

Two distribution paths. Pick per project, or mix.

Registry (you own the source). The CLI copies the component's source into your repo. You edit it like any other file in your codebase, and there is no runtime dependency on Gremorie:

npx gremorie@latest add rx-button   # React edition
npx gremorie@latest add ng-button   # Angular edition

npm (versioned package). Install the full edition and import what you need. Tree-shaking keeps only what you use:

npm i @gremorie/react     # or @gremorie/angular
import { Button } from '@gremorie/react';

export function Example() {
  return <Button>Ship it</Button>;
}

The trade-off: the registry gives you full control and zero lock-in; npm gives you one versioned source of truth and updates via npm update. Setup details for both paths are in Installation.

What every page gives you

Each component page follows the same shape: a live Preview / Code surface at the top, the anatomy tree of its subcomponents, the installation command, the full API reference for both editions, and accessibility and theming notes. If you want the judgment layer, when to reach for a button versus a link, label rules, hierarchy, that lives in the UX corpus, not here.

Contributing

The bar every page above meets is defined in the documentation standard. To add a component or improve an existing one, start at Contributing.

On this page