Instalacion

Instalar el paquete

npm install trud-calendar
# or
pnpm add trud-calendar
# or
yarn add trud-calendar

Peer dependencies: react >=18, react-dom >=18

Setup con asistente de IA

Usas un agente de IA para programar? Instala el Agent Skill para que tu IA conozca toda la API de trud-calendar — cada prop, slot, hook y patron:

npx skills add trudapp/trud-calendar

Funciona con Claude Code, Cursor, Copilot, Cline, Codex, y 40+ agentes mas.

Configuracion con Tailwind v4

Importa las variables de tema antes de Tailwind, y agrega la directiva @source para que Tailwind genere las clases de utilidad necesarias:

@import "trud-calendar/styles.css";
@import "tailwindcss";
@source "../node_modules/trud-calendar/dist";

Por que importa el orden

Las variables de trud-calendar estan definidas dentro de @layer trc. Importar los estilos antes de Tailwind asegura que @layer trc se declare primero y obtenga la menor prioridad en la cascada — para que tus sobreescrituras siempre ganen. Ver Temas > Sobreescribir variables para mas detalles.

Sin Tailwind

Si no usas Tailwind, simplemente importa el CSS pre-construido:

@import "trud-calendar/styles.css";

O en tu archivo JavaScript de entrada:

import "trud-calendar/styles.css";

Proyectos con shadcn/ui

shadcn v2 (Tailwind v4)

Si tu proyecto usa shadcn v2, el calendario hereda tu tema automaticamente. Las variables CSS hacen fallback a las de shadcn: var(--background), var(--foreground), etc.

Solo agrega la directiva @source e importa los estilos:

@import "trud-calendar/styles.css";
@import "tailwindcss";
@source "../node_modules/trud-calendar/dist";

shadcn v1 (Tailwind v3)

shadcn v1 define las variables CSS como numeros HSL crudos (ej. --border: 214.3 31.8% 91.4%), que no son colores CSS validos por si solos. Necesitas mapearlas manualmente con wrappers hsl(). Ver la seccion Temas > shadcn v1 para el snippet completo.