@eventodaigreja/ei-components
v0.1.38
Published
Design system completo com componentes React, tokens visuais e utilitários — pronto para usar em qualquer projeto React, **sem necessidade de Tailwind, PostCSS ou configuração adicional**.
Readme
@eventodaigreja/ei-components
Design system completo com componentes React, tokens visuais e utilitários — pronto para usar em qualquer projeto React, sem necessidade de Tailwind, PostCSS ou configuração adicional.
Instalação
npm install @eventodaigreja/ei-components
# ou
pnpm add @eventodaigreja/ei-componentsUso
O pacote distribui dois arquivos CSS, escolha conforme o seu projeto:
Você já usa Tailwind CSS v4 (recomendado)
Importe apenas os tokens (variáveis CSS de tema, light/dark) — eles são 100% compatíveis com @theme inline { --color-primary: hsl(var(--primary)); ... } no padrão shadcn:
/* No seu index.css / globals.css */
@import "@eventodaigreja/ei-components/tokens";Você NÃO usa Tailwind no consumidor
Importe o bundle completo (preflight + utilities + tokens já compilados):
import "@eventodaigreja/ei-components/styles";Depois, use os componentes normalmente:
import { Button, Card, Input } from "@eventodaigreja/ei-components";
export default function App() {
return (
<Card>
<Input placeholder="Digite algo..." />
<Button>Enviar</Button>
</Card>
);
}Ative o tema escuro adicionando
class="dark"no<html>do seu app.
⚠️ Não importe
/tokense/stylesao mesmo tempo — escolha um.
Utilitários
cn
Combina classes Tailwind com resolução de conflitos:
import { cn } from "@eventodaigreja/ei-components";
const cls = cn("px-4 py-2", isActive && "bg-primary text-primary-foreground");Navegação (navigation)
Estrutura de navegação pronta para uso em sidebars:
import { navigation } from "@eventodaigreja/ei-components";
import type { NavGroup } from "@eventodaigreja/ei-components";
navigation.forEach((group: NavGroup) => {
console.log(group.label, group.items);
});Design Tokens
Os tokens visuais são expostos como variáveis CSS:
.meu-componente {
background-color: var(--primary);
color: var(--primary-foreground);
border-radius: var(--radius);
}Tokens disponíveis: --primary, --secondary, --muted, --accent, --destructive, --success, --warning, --border, --input, --ring, --radius, e variantes *-foreground e *-hover.
Requisitos
| Dependência | Versão mínima | | ----------- | ------------- | | React | 18.x ou 19.x | | React DOM | 18.x ou 19.x |
Qualidade e publicação
npm run formataplica o Prettier em todo o projetonpm run format:checkvalida a formatação usada no CI- Pull requests validam formatação, tipos, lint e
build:lib - Publicações na
mainautoformatam o código antes de lintar, buildar e publicar - O workspace inclui configuração de VS Code para formatar ao salvar
Licença
MIT