How to install the Add to Calendar Button with React

Since React 19, web components are fully supported out of the box - no wrapper or workarounds needed. Simply use the Add to Calendar Button web component directly in your JSX.

We will highlight all options below.

Step 1: npm installation

Install the package from the npm registry.

npm install add-to-calendar-button

Step 2: Import it

Import the module into the component, where you want to use the button.

import 'add-to-calendar-button';

Step 3: Use it

Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.

With React 19, custom element properties can be typed via TypeScript's custom elements support. Register the element type once (e.g. in a global.d.ts) to get full type checking:

import type {
  AddToCalendarButtonType,
} from 'add-to-calendar-button';
import type {
  DetailedHTMLProps,
  HTMLAttributes,
} from 'react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'add-to-calendar-button': DetailedHTMLProps<
        Omit<HTMLAttributes<HTMLElement>, keyof AddToCalendarButtonType>,
        HTMLElement
      > &
        AddToCalendarButtonType;
    }
  }
}

export {};

If compilerOptions.types is set in your tsconfig, include react and react-dom alongside any existing entries:

{
  "compilerOptions": {
    "types": ["vite/client", "react", "react-dom"]
  }
}

Your code block could look like the following.

<add-to-calendar-button
  name="Title"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-09-20"
  end-date="2026-09-20"
  start-time="10:15"
  end-time="23:30"
  time-zone="EST"
></add-to-calendar-button>

Mind that the button only works on the client side! Add 'use client'; respectively.

Styles & languages

The script ships with the "default" button style and the English language pack built in - so the button looks great and works out of the box without any extra configuration.

Every other style and language loads automatically on demand (a few KB each) the moment you reference it - no manual wiring needed.

Bundling via npm (recommended for frameworks)

When you bundle the script, import the style and language modules you need so they register fetch-free at build time. Simply add the corresponding import statements anywhere in your entry file (or the component that uses the button):

import 'add-to-calendar-button/styles/3d';   // any style besides "default"
import 'add-to-calendar-button/i18n/de';       // any language besides English

See the "button-style" and "language" options at the Configuration page for the full picture.