Installation
Install CalendarKit Pro and set up Tailwind CSS and theme tokens.
Installation
1. Install the package
npm install calendarkit-prov2
# or
yarn add calendarkit-prov2
# or
pnpm add calendarkit-prov2Peer dependencies
You must have these installed in your project:
| Package | Version |
|---|---|
react | ^18 or ^19 |
react-dom | ^18 or ^19 |
| Tailwind CSS | v3+ (required for styling) |
2. Configure Tailwind CSS
CalendarKit Pro uses Tailwind utility classes. Add the package dist to Tailwind's content so its classes are not purged:
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
// Tell Tailwind to scan CalendarKit Pro dist files
'./node_modules/calendarkit-prov2/dist/**/*.{js,mjs}',
],
darkMode: 'class', // required for dark mode support
theme: {
extend: {
colors: {
// CSS variable tokens used by CalendarKit Pro
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
border: 'hsl(var(--border))',
ring: 'hsl(var(--ring))',
},
},
},
};3. Import the theme CSS
Import the bundled CSS once at the root of your application (e.g. app/layout.tsx in Next.js or main.tsx in Vite):
// app/layout.tsx ──or── src/main.tsx
import 'calendarkit-prov2/calendarkit.css';This file injects the default CSS variable tokens (light and dark mode) and base component styles.
Framework notes
Next.js (App Router)
// app/layout.tsx
import 'calendarkit-prov2/calendarkit.css';
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Components that use ProScheduler must be Client Components ('use client').
Vite / CRA
// src/main.tsx
import 'calendarkit-prov2/calendarkit.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);