@etus/seven-react

Seven Design System — umbrella package que reexporta tudo de @etus/ui (componentes React) e @etus/tokens (CSS variables).

Publicado no npm público sob o scope @etus.

Instalação

pnpm add @etus/seven-react
# ou
npm install @etus/seven-react

Sem configuração de registry — é um pacote público no npmjs.org, como @etus/ui e @etus/tokens.

Uso

Requer React 19 e Tailwind CSS 4.1+ com o plugin do seu bundler (@tailwindcss/vite ou @tailwindcss/postcss). No stylesheet global que o Tailwind processa:

@import "tailwindcss";
@import "@etus/seven-react/styles.css"; /* tokens + fontes + base + animações + @source do dist */

import { Button, Card } from "@etus/seven-react";

export function App() {
  return <Button>Olá Seven</Button>;
}

styles.css é uma folha de entrada do Tailwind (@theme, @utility, @source), não CSS puro: importada fora do pipeline do Tailwind (via <link> ou import no JavaScript), só os tokens e as fontes se aplicam e os componentes renderizam como HTML sem estilo, com build limpo.

Se quiser só os tokens (sem componentes):

@import "@etus/seven-react/tokens.css";

Por que esse pacote existe

@etus/seven-react é um umbrella 1:1 sobre @etus/ui — um nome de marca único sob o scope Seven, deixando espaço para futuros ports por framework (ex.: @etus/seven-vue). Hoje a API é idêntica à de @etus/ui; use o que preferir.