@expressive-ui/react

Componentes React (web) do ExpressiveUI, em Material 3 Expressive: cards, botões, FAB, listas reordenáveis, sheets, diálogos, navegação, busca, campos e mais, com molas e formas do M3.

Instalação

npm install @expressive-ui/react @expressive-ui/tokens

Requer React 19 ou superior.

Uso

Importe os dois CSS uma vez, no ponto de entrada da aplicação (os tokens antes dos componentes), e envolva a interface no provider:

import '@expressive-ui/tokens/tokens.css';
import '@expressive-ui/react/styles.css';
import { Button, ExpressiveCard, ExpressiveThemeProvider } from '@expressive-ui/react';

export function App() {
  return (
    <ExpressiveThemeProvider mode="system">
      <ExpressiveCard variant="tonal" eyebrow="Receita do mês" title="R$ 48.250" icon="payments" />
      <Button action={{ id: 'report.open', label: 'Ver relatório' }} onAction={(action) => console.log(action.id)} />
    </ExpressiveThemeProvider>
  );
}

As ações seguem o contrato do @expressive-ui/schema: cada uma é um { id, label } e chega ao onAction, onde o seu app decide o que fazer com o id.

Ícones

Por padrão os ícones usam a fonte Material Symbols Rounded por ligadura. Carregue-a no <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

Ou troque por qualquer biblioteca de ícones com renderIcon:

<ExpressiveThemeProvider renderIcon={(name, { size }) => <MyIcon name={name} size={size} />}>

Tema

| Prop | Padrão | Descrição | |---|---|---| | mode | 'system' | 'light', 'dark' ou 'system' (segue prefers-color-scheme). | | scheme | — | Paleta própria, por exemplo createScheme('#76589f') de @expressive-ui/tokens/dynamic. | | motion | 'expressive' | 'expressive' (molas com elasticidade) ou 'standard' (amortecidas). | | locale | 'pt-BR' | Idioma dos textos de acessibilidade embutidos: pt-* usa português, os demais inglês. | | labels | — | Sobrescreve textos embutidos (close, back, loading, position(...) etc.). | | renderIcon | — | Renderizador de ícones próprio. |

Next.js (App Router)

Os componentes já são marcados com 'use client' e podem ser importados direto de Server Components. Não é preciso transpilePackages.

Tailwind v4

@import "tailwindcss";
@import "@expressive-ui/tokens/tailwind.css";

Licença

MIT