Instalação
Dois pacotes, um arquivo CSS por estilo e um StyleProvider. Funciona com o App Router do Next.js, com o Vite e com qualquer app React 19.
// você vai aprender
- Quais pacotes e arquivos CSS adicionar
- Como escolher estilo, modo e cor da marca para o app inteiro
- Como passar para o português os textos que os componentes já trazem
Instale os pacotes
O @camaleo/react traz os componentes; o @camaleo/styles, o CSS e o createBrand.
pnpm add @camaleo/react @camaleo/stylesImporte o CSS
Importe o base.css uma vez e depois um arquivo para cada estilo que você usar. O minimal é o padrão e não precisa de arquivo próprio.
import "@camaleo/styles/base.css";
import "@camaleo/styles/neumorphism.css";
As fontes não vêm no pacote. As de cada estilo estão em Estilos e troca; sem elas, o estilo cai nas fontes do sistema.
Envolva o app
O StyleProvider aplica o estilo, o modo e a cor da marca a tudo dentro dele, inclusive popups.
import { Button, StyleProvider } from "@camaleo/react";
<StyleProvider styleName="neumorphism" mode="system" brand="#7c3aed">
<Button>Salvar</Button>
</StyleProvider>
| Prop | Valores |
|---|---|
styleName | minimal (padrão), swiss, editorial, progressive, material, cupertino, glass, neumorphism, clay, neubrutalism, retro, retro-pixel, y2k |
mode | light, dark ou system. Sem ele, herda do pai; na raiz, segue o sistema, sem nenhum script |
brand | Qualquer cor CSS. A biblioteca gera a escala e mantém o texto sobre ela em 4,5:1 ou mais |
Para aplicar o estilo na página inteira a partir de um Server Component, espalhe styleScopeProps no <html>:
import { styleScopeProps } from "@camaleo/react/style-scope";
<html lang="pt-BR" {...styleScopeProps({ styleName: "editorial" })}>
O material é inspirado no Material Design e o cupertino nas Human Interface Guidelines. O Camaleo não é afiliado ao Google nem à Apple e não usa fontes, ícones ou marcas deles.
Defina os textos dos componentes
Componentes que mostram ou anunciam texto por conta própria (botões de fechar, "Página 3", estados vazios) falam inglês por padrão. Para português, envolva o app uma vez com o MessagesProvider:
import { MessagesProvider } from "@camaleo/react";
<MessagesProvider locale="pt-BR">{children}</MessagesProvider>
locale:"en"ou"pt-BR", os pacotes que vêm com a biblioteca. É a forma de usar num Server Component.messages: só as chaves que você quer mudar, mescladas sobre o locale, por exemplomessages={{ toast: { close: "Dispensar" } }}. Algumas chaves são funções (pagination.page), que só um componente cliente consegue passar.- A prop do próprio componente (por exemplo
closeLabel) continua vencendo os dois. Mais em Idiomas e RTL.
Personalize
Do menos ao mais invasivo:
- Tokens. Defina-os em
[data-style], fora de qualquer camada, e eles vencem a biblioteca:[data-style] { --cml-radius-control: 4px; }. Só:rootnão chega dentro de um provider, porque cada provider declara os tokens de novo. Veja Tokens. - Partes. Mire o
data-slote os atributos de estado do componente:[data-slot="button"][data-variant="outline"] { … }. Para limitar uma regra a uma área ou a um estilo, veja Sobrescritas com escopo. - Marcação. Use
className,styleou a proprenderpara trocar o elemento que o componente renderiza.
Antes de publicar
@camaleo/reacte@camaleo/stylesinstaladosbase.cssimportado uma vez, depois um arquivo para cada estilo que você usa- O app dentro de um
StyleProvider(ou o<html>comstyleScopeProps) MessagesProviderdefinido se o seu app não é em inglês