@etus/ui

Seven Design System — componentes React 19 da ETUS, estilizados com Tailwind CSS 4 e os tokens do @etus/tokens (já embutidos neste pacote).

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

Requisitos

• React 19 (react + react-dom)
• Tailwind CSS 4.1+ com o plugin do seu bundler: @tailwindcss/vite (Vite) ou @tailwindcss/postcss (Next.js e demais pipelines PostCSS)

Tailwind não é opcional. Os componentes são classes utilitárias, e o styles.css deste pacote é uma folha de entrada do Tailwind (@theme, @utility, @source), não CSS puro. Sem o Tailwind processando esse arquivo, só os tokens e as fontes se aplicam: os componentes renderizam como HTML sem estilo e o build passa sem erro.

Instalação

pnpm add @etus/ui
# ou
npm install @etus/ui

tailwindcss é peer dependency: o gerenciador instala ou avisa quando falta.

Uso

No stylesheet global que o plugin do Tailwind processa, exatamente estas duas linhas:

@import "tailwindcss";
@import "@etus/ui/styles.css";

@etus/ui/styles.css já traz os tokens (light/dark), as fontes Inter e JetBrains Mono, a camada base mobile, as animações dos overlays (tw-animate-css) e o @source do próprio dist. Não é preciso apontar @source para node_modules, importar tw-animate-css à parte nem instalar @etus/tokens.

import { Button } from "@etus/ui";

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

Importe o stylesheet sempre via @import no CSS do pipeline do Tailwind, não via import "@etus/ui/styles.css" no JavaScript: como arquivo separado, o Tailwind não gera os utilitários dos componentes.

Vite

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default { plugins: [tailwindcss()] };

Next.js / PostCSS

// postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };

O stylesheet global (app/globals.css) é importado uma vez no layout raiz.

Conferindo a integração

Inspecione um <Button> renderizado: ele deve computar display: inline-flex e gap: var(--button-size-default-gap). Se ele aparece como um <button> nativo, o Tailwind não está processando o stylesheet que importa @etus/ui/styles.css (plugin ausente, ou o @import está em um arquivo fora do pipeline do Tailwind).

Alternativa: registry (seven add)

Para páginas sensíveis a peso ou quando você quer ser dono do código dos componentes, use a CLI @etus/seven (npx @etus/seven init + seven add button). O critério de escolha está em docs/distribution/react-consumption.md.