@abbiamo/ui

Official Abbiamo Design System — React component library for the Abbiamo product family.

Built on React 18 + TypeScript + Tailwind CSS v3. Compatible with Vite, Next.js, and any React project.

New here? Start with the main README for the full 0-to-hero guide, product family overview, and design token reference.

Want to see it visually? Open design-system.html in your browser.

Installation

npm install @abbiamo/ui

Configure your npm client for the GitHub registry (.npmrc in project root):

@abbiamo:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

Peer dependencies:

npm install react react-dom
npm install -D tailwindcss clsx tailwind-merge class-variance-authority

Setup (2 steps)

1. Import styles

Once in your app root:

import "@abbiamo/ui/styles";

2. Extend Tailwind

// tailwind.config.ts
import abbiamoPreset from "@abbiamo/ui/tailwind";

export default {
  presets: [abbiamoPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@abbiamo/ui/dist/**/*.js",
  ],
};

Usage

import { Button, Badge, StatCard, Input, Alert, Sidebar, AppShell } from "@abbiamo/ui";

// Product-themed — just pass the product prop
<Button product="go">Start route</Button>
<Button product="pay" productOutline>View invoice</Button>
<StatCard label="Entregas" value="1.284" trend={12.5} product="group" />

// Forms
<Input label="CEP" placeholder="00000-000" error="Campo obrigatório" />

// Alerts
<Alert variant="success" title="Rota criada">407 CEPs encontrados.</Alert>

// App shell with sidebar
<AppShell
  sidebar={
    <Sidebar
      product="group"
      brand={<img src="/logo.png" />}
      navGroups={[{ items: [...] }]}
      user={{ name: "Aurelio", email: "[email protected]" }}
    />
  }
>
  {children}
</AppShell>

Product Colors

Every component accepts a product prop that switches to the correct palette:

| Product | Color | Hex | Use case | |---------|-------|-----|----------| | group | Green | #6ED796 | Parent brand, admin, multi-product | | go | Yellow | #FFE56B | Routes, fleet, deliveries | | pay | Blue | #44B4FF | Invoices, payments, finance | | engage | Coral | #FF7378 | Campaigns, CRM, notifications | | ai | Purple | #B47BCB | Analytics, predictions, AI tools |

Dark Mode

import { ThemeProvider, ThemeToggle, THEME_SCRIPT } from "@abbiamo/ui";

// Prevent flash of unstyled content
<script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />

<ThemeProvider>
  <App />
  <ThemeToggle />
</ThemeProvider>

Claude Code Skill

Install the /abbiamo-preview skill to get AI-assisted design compliance:

cd claude-skill && ./install.sh

Generates 2 HTML design alternatives before you build, validates components, and looks up tokens.

Contributing

See CONTRIBUTING.md for the component authoring checklist.

Abbiamo Design System v1.1