Pontos de Customização Rápida

O template prepara 3 arquivos como pontos de customização fácil. Eles são os primeiros que um fork vai querer alterar, mas o cliente não está limitado a eles — pode modificar qualquer arquivo do projeto.

1. theme.config.ts

Define os tokens de cor do tema. Todo fork vai querer personalizar este arquivo.

// app/config/theme.config.ts
export const themeColors = {
  'default-primary': '#ff6b00',       // Cor principal da marca
  'header-bg': '#1a0a00',
  'header-register-bg': '#ff6b00',
  'sidebar-bg': '#1f1200',
  // ... todas as cores personalizadas
};

2. routes.config.ts

Define a árvore de rotas. Útil para adicionar/remover páginas rapidamente.

// app/config/routes.config.ts
import { index, layout, route } from '@react-router/dev/routes';

export function buildRoutes() {
  return [
    layout('routes/_layout.tsx', [
      index('routes/_index.tsx'),
      route('perfil', 'routes/profile.tsx'),
      route('deposito', 'routes/deposit.tsx'),
    ]),
  ];
}

3. layout.config.ts

Define qual componente de layout usar. Para forks que querem um layout visual diferente.

// app/config/layout.config.ts
import MyCustomLayout from '~/layouts/MyCustomLayout';

export type LayoutComponentProps = {
  brand: BrandConfig;
  clientEnv: Record<string, string>;
  children: React.ReactNode;
};

export const LayoutComponent = MyCustomLayout;

Além dos config files

O cliente pode ir muito além desses 3 arquivos:

• Criar componentes próprios em app/components/
• Adicionar páginas em app/routes/ (e registrá-las em routes.config.ts)
• Criar hooks em app/hooks/
• Adicionar stores em app/store/
• Customizar serviços em app/services/
• Redesenhar o layout inteiro — criar um novo layout em app/layouts/
• Adicionar bibliotecas — instalar o que precisar via pnpm

O que evitar

Ação	Por que evitar
Modificar @cactus-agents/* diretamente	São pacotes npm — alterações locais serão perdidas no pnpm update
Alterar routes.ts	Apenas importa buildRoutes() do config — edite o config ao invés
Alterar root.tsx sem necessidade	HTML shell e providers globais — mudanças aqui podem quebrar atualizações futuras do template

dica

Se precisar de algo que o @cactus-agents/* não suporta, entre em contato com o time Cactus. Podemos adicionar ao SDK para que todos os clientes se beneficiem.