Next.js

Configurar acesso ao registry#

O @ag/ui é hospedado no registry privado da empresa. Crie um arquivo .npmrc na raiz do seu projeto:

@ag:registry=http://seu-servidor:4873
//seu-servidor:4873/:_authToken=${VERDACCIO_TOKEN}

Substitua seu-servidor:4873 pelo endereço do Verdaccio interno. O token de acesso pode ser obtido com o time de plataforma.

Instalar o pacote#

pnpm add @ag/ui

Importar os estilos#

No seu arquivo de layout raiz (app/layout.tsx), importe o CSS do @ag/ui antes de qualquer outro estilo:

import "@ag/ui/styles.css"
import "./globals.css"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body>{children}</body>
    </html>
  )
}

Configurar o Tailwind CSS#

O @ag/ui utiliza Tailwind CSS v4. No seu globals.css, importe o CSS do pacote como fonte de configuração:

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

Se você precisar sobrescrever variáveis de tema, adicione após os imports:

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

:root {
  /* sobrescreva variáveis aqui se necessário */
}

Adicionar o ThemeProvider (opcional)#

Se o projeto suportar modo escuro, envolva a aplicação com o ThemeProvider:

import "@ag/ui/styles.css"
import "./globals.css"
import { ThemeProvider } from "@ag/ui/providers"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Usar um componente#

import { Button } from "@ag/ui"

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Olá, mundo</Button>
    </div>
  )
}

Variáveis de ambiente#

Em produção, configure a variável VERDACCIO_TOKEN no painel da sua plataforma de deploy. Nunca commite o token no repositório.

Para desenvolvimento local, você pode usar um arquivo .env.local:

VERDACCIO_TOKEN=seu-token-aqui

Certifique-se de que .env.local está no .gitignore.