Installation

Install the package

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

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

AI-assisted setup

Using an AI coding agent? Install the Agent Skill so your AI knows the full trud-calendar API — every prop, slot, hook, and pattern:

npx skills add trudapp/trud-calendar

Works with Claude Code, Cursor, Copilot, Cline, Codex, and 40+ more agents.

Tailwind v4 setup

Import the theme variables before Tailwind, and add the @source directive so Tailwind generates the required utility classes:

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

Why import order matters

trud-calendar’s variables are defined inside @layer trc. Importing the styles before Tailwind ensures @layer trc is declared first and gets the lowest cascade priority — so your overrides always win. See Theming > Overriding variables for details.

Without Tailwind

If you’re not using Tailwind, just import the pre-built CSS file:

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

Or in your JavaScript entry:

import "trud-calendar/styles.css";

shadcn/ui projects

shadcn v2 (Tailwind v4)

If your project uses shadcn v2, the calendar inherits your theme automatically. The CSS variables fall back to shadcn’s var(--background), var(--foreground), etc.

Just add the @source directive and import the styles:

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

shadcn v1 (Tailwind v3)

shadcn v1 defines CSS variables as raw HSL numbers (e.g. --border: 214.3 31.8% 91.4%), which are not valid CSS colors on their own. You’ll need to map them manually with hsl() wrappers. See the Theming > shadcn v1 section for the full snippet.