--- title: "Overview" url: "https://twistcal.com/docs" description: "TwistCal — a lightweight, zero-dependency Add to Calendar web component. Shadow DOM, 19 KB (11 KB slim), 12 languages." --- TwistCal is a zero-dependency “Add to Calendar” web component. Shadow DOM style isolation, four calendar services, 12 languages, timezone-aware — 19 KB minified (11 KB slim). Drop one script tag on any page and ship. ## Three usage modes - **Web component** — `` renders a styled dropdown button - **Declarative triggers** — `data-twistcal` attributes on any element - **Programmatic API** — import the URL generators and ICS builder directly ## Features - **Shadow DOM** — styles don’t leak in or out - **Four calendars** — Google, Outlook, Yahoo, `.ics` for Apple and everything else - **12 languages** — auto-detected from `lang`, ``, or `navigator.language` - **Timezone-aware** — pin events to any IANA zone, DST-aware via `Intl` - **All-day events** — `all-day="true"` for date-only formats - **Button variants** — `solid` (default) and `outline` - **Calendar selection** — pick which services to show and in what order - **Full CSS theming** — 25+ `--tc-*` custom properties - **Slim builds** — drop icons, 19 KB → 11 KB - **Generators split** — import just the URL/ICS logic (3 KB) - **Keyboard nav** — ArrowUp/Down, Home/End, Escape - **Zero dependencies** — no jQuery, no React, no nothing ## Next steps - [Getting started](/docs/getting-started/) — install, build variants, first usage - [Web component](/docs/web-component/) — the `` element, all attributes - [Styling](/docs/styling/) — CSS custom properties and theming - [Declarative triggers](/docs/triggers/) — `data-twistcal` on any element - [API](/docs/api/) — programmatic exports, generators, custom calendars - [Internationalization](/docs/i18n/) — 12 languages and auto-detection - [Datetime & timezones](/docs/datetime/) — ISO 8601, IANA zones, DST - [MCP](/docs/mcp/) — connect AI agents to TwistCal via MCP