Skip to main content
Gremorie

Visão geral

O catálogo de componentes do Gremorie - 83 primitivos em 8 categorias, em edições React e Angular, instaláveis via registry ou npm.

Layout e exibição

Interação

O Gremorie distribui 83 primitivos de produção, do dia a dia (Button, Dialog, Table) até um vocabulário completo de superfícies de IA (PromptInput, Message, Reasoning, Artifact). Cada componente existe em duas edições, React e Angular, com a mesma anatomia e o mesmo contrato de props, e todos são tematizados inteiramente via design tokens, então a sua marca se aplica sem tocar no código do componente.

As oito categorias

Duas edições, um contrato

Cada componente é distribuído numa edição React (rx-*) e numa edição Angular (ng-*). As duas não são ports de conveniência: elas compartilham uma árvore de anatomia fixa e um contrato de paridade de props, então um time que conhece o PromptInput em React lê o template Angular sem reaprender nada. O workbench do Gremorie renderiza as duas edições lado a lado para cada componente, em cada tema, e é assim que a paridade é validada antes de qualquer publicação.

Cada página de componente documenta as duas edições em abas; a árvore de anatomia no topo de cada página é compartilhada pelas duas.

Como instalar

Dois caminhos de distribuição. Escolha por projeto, ou misture.

Registry (você é dono do código). A CLI copia o código-fonte do componente para o seu repositório. Você edita como qualquer outro arquivo do seu codebase, e não existe dependência de runtime do Gremorie:

npx gremorie@latest add rx-button   # edição React
npx gremorie@latest add ng-button   # edição Angular

npm (pacote versionado). Instale a edição completa e importe o que precisar. O tree-shaking mantém no bundle só o que você usa:

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

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

O trade-off: o registry dá controle total e zero lock-in; o npm dá uma fonte da verdade versionada e updates via npm update. Os detalhes de setup dos dois caminhos estão em Installation.

O que cada página entrega

Cada página de componente segue o mesmo formato: uma superfície Preview / Code ao vivo no topo, a árvore de anatomia dos subcomponentes, o comando de instalação, a referência de API completa das duas edições, e notas de acessibilidade e theming. Se você procura a camada de julgamento, quando usar um botão em vez de um link, regras de label, hierarquia, isso vive no corpus de UX, não aqui.

Contribuindo

A régua que todas as páginas acima cumprem está definida no padrão de documentação. Para adicionar um componente ou melhorar um existente, comece em Contributing.

On this page