How to install the Add to Calendar Button with Next.js

Step 1: npm installation

Since Next.js builds on React 19, it fully supports web components out of the box. Simply use the Add to Calendar Button web component directly.

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.

Yes, it is that simple.

Your code block could look like the following.

<add-to-calendar-button
  name="Title"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-10-03"
  end-date="2026-10-03"
  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.

When you load the browser script directly, every other style and language loads automatically on demand (a few KB each). Bundled integrations should register the required modules explicitly as shown below.

Bundling via npm (recommended for frameworks)

When you bundle the script, import the style and language modules you need before the main module. This registers them fetch-free before the custom element upgrades, including during SSR hydration:

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

To load all styles or all languages in one statement, use the aggregate modules: import 'add-to-calendar-button/styles/all' and import 'add-to-calendar-button/i18n/all'.

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

Server Side Rendering (SSR)

The button can also pre-render a shell on the server for an instant, layout-stable first paint. During hydration, the component keeps the shell's matching styles in place until the client button is fully styled. See the "Server-side rendering" section on the advanced-use page. Server-side rendering

A full example could look like this.

// app/components/atcb-client.tsx (client upgrade)
'use client';
import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button'; // load last

type AtcbClientProps = {
  html: { __html: string };
};

export default function AtcbClient({ html }: AtcbClientProps) {
  return <div dangerouslySetInnerHTML={html} />;
}

// app/page.tsx (server component)
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';
import AtcbClient from './components/atcb-client';

export default function Page() {
  const html = {
    __html: atcb_generate_ssr_html({
      name: 'Reminder to check the add-to-calendar-button demo',
      options: ['Apple', 'Google'],
      location: 'World Wide Web',
      startDate: '2026-10-03',
      endDate: '2026-10-03',
      startTime: '10:15',
      endTime: '23:30',
      timeZone: 'Europe/Berlin',
      buttonStyle: '3d',
      language: 'de',
    }),
  };
  return <AtcbClient html={html} />;
}