Começar

Instalação

Pacotes, Tailwind, CSS, fontes e o primeiro componente em cinco minutos.

Requisitos#

Node 20+, React 18 ou 19, Tailwind 3. Os pacotes são ESM e trazem os tipos. Next.js App Router funciona sem configuração extra; os componentes com estado já declaram "use client".

Passo a passo#

1
Neste repositório
sh
```
pnpm install
pnpm ds:build
pnpm docs
```
A documentação fica em /. Neste computador, pnpm docs serve essa rota na porta 3100. No site publicado, o laboratório dos componentes fica em /playground.
2
Em outro app, por enquanto, aponte para a pasta
package.json
```
{
  "dependencies": {
    "@hiboupay/tokens": "file:../../hiboupay-design-system/packages/tokens",
    "@hiboupay/react": "file:../../hiboupay-design-system/packages/react",
    "@hiboupay/icons": "file:../../hiboupay-design-system/packages/icons"
  }
}
```
@hiboupay/content é opcional: só para quem lê o registry (docs, agentes, validação). Rode pnpm ds:build neste repo antes de instalar no app.
Registry privado é o passo seguinte
Quando os pacotes forem publicados, o app troca o file: por versão e aponta @hiboupay para o GitHub Packages. O token fica na variável GITHUB_PACKAGES_TOKEN, nunca no arquivo commitado. O modelo está em .npmrc.template.
3
Use o preset e escaneie os componentes
tailwind.config.js
```
import hibou from "@hiboupay/react/tailwind-preset";

export default {
  presets: [hibou],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@hiboupay/react/dist/**/*.js",
  ],
};
```
O preset traz cores hibou-*, raios rounded-hb-*, alturas h-c-*, sombras shadow-e0…e3, curvas, durações, fontes e animações. Sem o caminho do pacote em content, as classes internas dos componentes não são geradas.

Importe o CSS nesta ordem

app/globals.css

@import "@hiboupay/tokens/tokens.css";   /* variáveis --hibou-*, --hb-*, --g-* */
@import "@hiboupay/react/base.css";      /* body, foco, scrollbar */
@import "@hiboupay/react/styles.css";    /* vidro, labels, kbd, animações */

@tailwind base;
@tailwind components;
@tailwind utilities;

Carregue as fontes

app/layout.tsx

import { Inter, JetBrains_Mono, Sora } from "next/font/google";

const sora = Sora({ subsets: ["latin"], variable: "--font-sora" });
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR" data-glass="base" className={`${sora.variable} ${inter.variable} ${mono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

data-glass escolhe o nível de vidro global (base, medio, intenso). Para respeitar a preferência do usuário antes da primeira pintura, leia o cookie hb-glass num script inline, como esta documentação faz.

6
Primeiro componente
Pronto

Conferir#

pnpm verify

Typecheck, drift dos derivados e uma story por componente do registry.