Installation

O Gremorie é distribuído de duas formas — escolha a que se encaixa no seu projeto:

1. Como pacotes npm (versionados) — npm i @gremorie/react. O código vive em node_modules e você recebe atualizações com npm update. Melhor quando você quer uma fonte da verdade compartilhada entre projetos.
2. Como source via o registry (copy-paste) — npx gremorie add <name>. Cada primitive vira um arquivo que você possui e pode editar. Melhor quando você quer controle total sobre o código.

Instalar como pacote (npm)

O começo mais rápido: instale a edição completa em um pacote e importe qualquer primitive. O tree-shaking mantém só o que você usa no bundle final.

npm i @gremorie/react

npm i @gremorie/angular

Depois importe os componentes diretamente do pacote:

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 {}

Configure os estilos

As duas edições lidam com estilização de forma diferente no caminho npm:

• React entrega uma stylesheet pré-compilada com os design tokens e os estilos de cada componente em um único arquivo. Importe uma vez e você não precisa de Tailwind, de um import @theme, nem de qualquer config @source.
• Angular emite classes utilitárias do Tailwind e não entrega nenhum CSS compilado, então o caminho npm requer Tailwind CSS v4 no seu projeto. Você importa o theme dos tokens e aponta o Tailwind para os pacotes @gremorie em node_modules com uma linha @source, para que os utilitários deles sejam compilados no seu 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';

Esse é o setup npm inteiro: instale, configure os estilos, use os componentes. O fluxo da CLI abaixo é a alternativa copy-paste em que você possui o source e o compila com o seu próprio Tailwind.

Copy-paste via a CLI (registry)

Prefere possuir o source? Instale a CLI e puxe primitives para o seu projeto sob demanda — cada um vira um arquivo que você pode editar livremente.

Pré-requisitos

• Node.js 20+ para o runtime da CLI
• Tailwind CSS v4 — necessário para o fluxo copy-paste/registry (o source que você possui é compilado pelo seu Tailwind), e para o caminho npm do Angular. O caminho npm do React entrega CSS pré-compilado e não requer Tailwind.
• Um projeto Angular 21+ ou um projeto React 19 (Next.js, Vite, Remix)

Passos

npx gremorie@latest init

pnpm dlx gremorie@latest init

yarn dlx gremorie@latest init

bunx gremorie@latest init

/* src/styles.css */
@import 'tailwindcss';
@import '@gremorie/tokens/theme.css';

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

npx gremorie@latest add ng-button

npx gremorie@latest add rx-button

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>
  );
}

Verificação

Se o button renderizar estilizado (arredondado, com a cor primary da marca na variant default), a instalação está funcionando de ponta a ponta: CLI -> source -> tokens -> render.

Para o próximo passo, veja Your first component para um tutorial completo de cinco minutos que conecta três primitives em uma chat surface.