Cally is a free open-source calendar web component library for building custom, accessible date pickers. See how it works, its features, and how it compares…
Cally is not a date picker in the traditional sense of a single widget you drop into a page and configure with a few options. It is a set of low-level, unstyled calendar primitives delivered as native Web Components, meaning they work in any framework or in plain HTML without a wrapper library. The core components handle the genuinely hard parts of building a calendar: rendering the correct days for a given month, managing keyboard navigation and focus, exposing the right ARIA attributes for screen readers, and supporting range and multi-month selection. Everything else, including the text input, the toggle button, and the popover or dropdown that shows the calendar, is left to the developer to build or bring from elsewhere.
This design comes directly from creator Nick Williams's earlier experience building the Duet Date Picker, where he found that fully opinionated, all-in-one date pickers tend to fight against a project's existing design system. Cally's philosophy is the opposite: give developers a small, correct, accessible engine, and let them own the visual layer entirely. That trade-off means Cally requires more assembly than something like a jQuery UI datepicker or a fully-styled React component, but it also means teams are never fighting the library's default styles or trying to override deeply nested CSS just to match their brand.
Because Cally ships as standards-based Web Components rather than framework-specific code, it fits into React, Vue, Svelte, or vanilla JavaScript projects without needing a separate integration package for each. This has made it a popular pairing with utility-first CSS frameworks: daisyUI, a popular Tailwind CSS component library, documents Cally as its recommended calendar primitive, since daisyUI can style Cally's unstyled markup directly with utility classes rather than fighting a competing design system. Community tutorials also show Cally combined with Stimulus and Alpine.js for lightweight, server-rendered applications (for example, Rails apps) that want a modern date picker without adopting a full JavaScript framework.
For teams evaluating Cally, the key question is not pricing or support (there is none, in the commercial sense) but fit: does your project want an accessible, framework-agnostic calendar engine that you style and wire up yourself, or do you want a fully-baked, opinionated date-picker component? Cally is squarely built for the former. Its tiny footprint, standards-based approach, and accessibility focus make it an attractive default choice for design-system-driven teams in 2026, while teams wanting a zero-assembly, drop-in widget will likely be better served by a heavier, more opinionated library.
Yes. Cally is a fully open-source project with no paid tiers, licenses, or subscriptions.
Cally was created by developer Nick Williams, who previously worked on the Duet Date Picker; Cally is described as its spiritual successor.
Yes. Because Cally is built as standards-based Web Components (custom elements), it works in React, Vue, Svelte, plain HTML, and most other front-end stacks without a separate integration package.
No. Cally intentionally ships without visual styling so developers can theme it to match their own design system; it is commonly paired with Tailwind CSS and daisyUI.
Cally is very lightweight, at roughly 8 to 9 kilobytes minified and gzipped for the core components.
Yes, accessibility is a core design goal: the components include keyboard navigation and ARIA attributes intended to work well with assistive technology out of the box.
Yes, in addition to single-date selection, Cally includes dedicated components for date ranges (calendar-range) and multi-month calendar views (calendar-multi-view).
Cally can be installed via npm or included directly with a script tag from a CDN such as unpkg, with no required build step for basic usage.