Início rápido

Next.js com Material UI

O Constela traz um tema pronto para o Material UI (versões 5 a 7), com paleta, tipografia, sombras e ajustes de botão, input, card, diálogo, chip e tabela.

1. Instale

npm install @novah-care/constela

O pacote usa o @mui/material que o seu projeto já tem.

2. Crie o tema

// src/theme/ThemeRegistry.tsx
'use client';
import * as React from 'react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { createNovahTheme } from '@novah-care/constela/mui';
import '@novah-care/constela/fonts.css';

export default function ThemeRegistry({ children, mode = 'light' }: { children: React.ReactNode; mode?: 'light' | 'dark' }) {
  const theme = React.useMemo(() => createNovahTheme(mode), [mode]);
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

3. Ajustes do projeto

Passe o que for específico do projeto no segundo argumento. Ele é mesclado por cima do Constela:

const theme = createNovahTheme('light', {
  components: { MuiDataGrid: { styleOverrides: { root: { border: 0 } } } },
});

Não sobrescreva palette, typography ou shape no projeto. Se um valor do Constela não serve, abra uma proposta no repositório.

4. Cores fora do palette

Para gráficos e estilos que não passam pelo palette, use as cores resolvidas:

import { novahColors } from '@novah-care/constela/mui';
import { chartColors } from '@novah-care/constela';

const c = novahColors(theme.palette.mode);
const series = chartColors(theme.palette.mode); // [principal, destaque, secundária, comparação]

Com Tailwind no mesmo projeto

Se o projeto usa Material UI e Tailwind juntos, importe também o tailwind.css (veja Next.js com Tailwind). Os dois leem os mesmos tokens.

Mapeamento do palette