@cupcodev/ui

Design system Cupcode pronto para uso (componentes React + estilos + presets Tailwind).

Instalação

npm install @cupcodev/ui

Além do pacote, instale as peer dependencies listadas em peerDependencies (React 18, Tailwind 3, Radix UI, etc.). Um comando típico:

npm install react react-dom tailwindcss class-variance-authority tailwind-merge lucide-react next-themes react-router-dom \
cmdk embla-carousel-react input-otp react-day-picker react-resizable-panels recharts sonner vaul \
@radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-aspect-ratio @radix-ui/react-avatar \
@radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog \
@radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar \
@radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
@radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider \
@radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle \
@radix-ui/react-toggle-group @radix-ui/react-tooltip tailwindcss-animate @tailwindcss/typography

Tailwind

Use o preset disponibilizado pelo pacote:

// tailwind.config.js
module.exports = {
  presets: [require("@cupcodev/ui/tailwind-preset.cjs")],
  content: [
    "./src/**/*.{ts,tsx}", // ajuste para o seu projeto
    "./node_modules/@cupcodev/ui/dist/**/*.{js,jsx}", // necessário para as classes dos componentes
  ],
};

E importe os estilos globais (tokens + reset):

import "@cupcodev/ui/styles/global.css";

Uso básico

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

export default function Example() {
  return <Button variant="default">Oi Cupcode</Button>;
}

Todos os componentes Cupcode e shadcn/ui base são reexportados de @cupcodev/ui. Exemplo:

import { NavbarCupcode, ThemeToggle, Card } from "@cupcodev/ui";

Para importações segmentadas, há submódulos como @cupcodev/ui/charts, que expõe apenas os componentes de gráficos/carrossel.

Tema / Dark mode

O ThemeToggle depende de next-themes. Adicione o provider na raiz do app:

import { ThemeProvider } from "next-themes";

export function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {/* sua aplicação */}
    </ThemeProvider>
  );
}

No Next.js (app router), coloque o provider em `layout.tsx`; em Vite/CRA, envolva a raiz.

### Peers

| Pacote | Versão mínima | Uso no DS |
| --- | --- | --- |
| `react`, `react-dom` | ^18.3.1 | base dos componentes |
| `tailwindcss` | ^3.4.17 | util classes + preset |
| `class-variance-authority`, `tailwind-merge` | ^0.7.1 / ^2.6.0 | variantes e merge de classes |
| `lucide-react` | ^0.462.0 | ícones |
| `next-themes` | ^0.3.0 | controle de tema (ThemeToggle) |
| `@radix-ui/*` | conforme `package.json` | primitives dos componentes shadcn |
| `cmdk`, `embla-carousel-react`, `react-day-picker`, `input-otp`, `react-resizable-panels`, `recharts`, `sonner`, `vaul` | conforme `package.json` | componentes específicos (command palette, carousel, calendário, OTP, panels, charts, toasts, drawers) |
| `tailwindcss-animate`, `@tailwindcss/typography` | ^1.0.7 / ^0.5.16 | plugins usados pelo preset |

Consulte `peerDependencies` para a lista completa ao instalar.

Tipos e superfícies

Os componentes são exportados via export { Component } (ex.: export { default as DockWrapper }). Importe sempre de @cupcodev/ui para garantir que os tipos e estilos correspondentes estejam alinhados.