Overview
Two ways into Gremorie: the developer path, from install to first component, and the designer path, from tokens to Figma mapping.
Setup
Installation
Add Gremorie to your Angular or React project in four steps.
Your first component
Five minute tutorial: build a working chat surface from three primitives.
Project setup
Tailwind v4 config, theme cascade, path aliases, dark mode, and per-framework integration.
Designers
Background
Philosophy
The non-negotiable decisions every component, pattern, and page in Gremorie is held against.
Contributing
How to add components, patterns, and docs to Gremorie.
Gremorie is the AI-native design system for React and Angular: 83 components in two editions with one shared contract, a three-layer token system, and six brand themes, all documented in one place.
There are two ways in. Pick yours.
Pick your path
For developers
Install via registry or npm, wire the theme CSS, and build a working chat surface from three primitives in five minutes.
For designers
The component vocabulary and anatomy trees, how Figma styles map to the token layers, and the workbench for inspecting both editions.
The developer path, step by step
- Installation: pick registry (you own the source) or npm (versioned package) and add Gremorie to a React or Angular project.
- Your first component: wire
PromptInput,Conversation, andMessageinto a working chat surface. - Project setup: Tailwind v4 config, the theme cascade, path aliases, and dark mode.
From there, browse the component catalog or go straight to the tokens that theme it.
Background
- Philosophy: the non-negotiable decisions every component is held against, like tokens over values and composition over configuration.
- Contributing: how to add components, patterns, and docs.