Godzilla UI

Biblioteca de componentes de UI em Vue 3, construída sobre Reka UI (primitives acessíveis) e Tailwind CSS v4, integrada ao design system Zilla — encapsula os tokens, padrões visuais e componentes do Zilla numa lib consumível por outros produtos.

Storybook

Destaques

• Reka-first — primitives acessíveis embrulhados numa API pequena e previsível.
• Theming CSS-first via o contrato --ui-*, com dark mode e cores semânticas.
• Multi-tenant — paletas do @godzilla/theme, trocáveis pelo controle Tenant na toolbar.
• Acessível por padrão — os primitives Reka entregam ARIA e navegação por teclado.

Instalação

pnpm add @godzilla/ui @godzilla/theme

Uso mínimo

/* main.css */
@import "tailwindcss";
@import "@godzilla/ui/theme.css"; /* contrato --ui-* */
@import "@godzilla/theme/base.css"; /* fundações (requerido) */
@import "@godzilla/theme/godzilla.css"; /* marca — ou quero-bolsa.css */

// main.ts
import { createApp } from "vue";
import { createGodzilla } from "@godzilla/ui";
import App from "./App.vue";
import "./main.css";

createApp(App).use(createGodzilla()).mount("#app");

<script setup lang="ts">
import { GButton, GIcon } from "@godzilla/ui";
</script>

<template>
  <GButton color="primary" variant="solid" leading-icon="i-lucide-check">
    Confirmar
  </GButton>
  <GIcon name="i-lucide-rocket" class="size-6 text-primary" />
</template>

Ícones: o GIcon usa Iconify (@iconify/vue) — nome no formato i-{coleção}-{ícone} (ex.: i-lucide-rocket), 200k+ ícones carregados sob demanda da API do Iconify. Busque em icones.js.org. Mesmo formato nos props leading-icon/trailing-icon do GButton.

Desenvolvimento

O workbench é o Storybook (apps/storybook): exemplos ao vivo, docs (MDX) e testes.

pnpm install
pnpm dev        # Storybook em http://localhost:6006 (workbench + docs)
pnpm test       # lint/typecheck/test (inclui as stories em browser mode)

Cada PR publica um preview navegável do Storybook no GitHub Pages (…/pr-preview/pr-<N>/); a main publica o Storybook canônico na raiz.

Documentação

• Storybook — docs ao vivo: guias (Theming, Tenants, fundações), o guia Migration (@quero/zilla → @godzilla/ui) e as props de cada componente (autodocs).
• DESIGN.md — tokens, theming, padrões de componente, exemplos
• ROADMAP.md — plano de construção e status atual
• docs/zilla-map.md — mapa do design system Zilla
• docs/CONTRIBUTING.md — fluxo de contribuição (IA + harness)