HeroUI (antes NextUI)

Se renombró de NextUI a HeroUI en 2024 (mismo equipo, mismo proyecto). A diferencia de shadcn/ui, sí es un paquete npm normal: se instala y se importa, no se copia código.

Instalación

pnpmbunnpm

pnpm add @heroui/react framer-motion

bun add @heroui/react framer-motion

npm install @heroui/react framer-motion

Configuración inicial

1. Agregar el plugin de Tailwind en tailwind.config:

tailwind.config.ts

import { heroui } from "@heroui/react"

export default {
  content: ["./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"],
  plugins: [heroui()]
}

2. Envolver la app en el provider:

main.tsx

import { HeroUIProvider } from "@heroui/react"

;<HeroUIProvider>
  <App />
</HeroUIProvider>

Tips

• disableAnimation en el provider si framer-motion no hace falta (bundle más chico).
• El theming (colores, radios) se define en el plugin de Tailwind, no con CSS variables sueltas.