Primeiros passos

Como instalar e configurar os pacotes em um app Next.js.

1. Instale os pacotes

Instale só os que for usar. Todos são independentes.

terminal

npm install @dexcode/ui @dexcode/helpers @dexcode/types

2. Configure o Tailwind para o @dexcode/ui

Os componentes usam classes do Tailwind, e o Tailwind do seu app precisa saber disso para gerar essas classes. Importe o CSS do pacote no seu CSS global, logo depois do Tailwind:

src/app/globals.css

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

Sem essa linha os componentes aparecem sem estilo. O arquivo não traz CSS pronto: ele só aponta o Tailwind para os componentes do pacote, então o app continua gerando apenas as classes que usa.

Tema escuro

Os componentes já têm estilos claros e escuros (classes dark:) e seguem a configuração de dark mode do Tailwind do seu app:

Sem configurar nada: seguem o tema do sistema operacional (prefers-color-scheme).
Com botão de tema no app: adicione o @custom-variant abaixo e coloque a classe dark no <html> quando o tema for escuro.

src/app/globals.css

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

@custom-variant dark (&:where(.dark, .dark *));

3. Use

src/app/page.tsx

import { Button } from "@dexcode/ui";

export default function Page() {
  return <Button>Começar</Button>;
}

Requisitos

@dexcode/ui: React 19 e Tailwind CSS 4.
@dexcode/helpers: Next.js 16 ou superior (usa o arquivo proxy.ts).
@dexcode/types: apenas TypeScript, sem dependências.