ArcGIS Blog

Announcements

Developers

Calcite Design System 5.0 released!

By Kitty Hurley and Isaac Braun

Learn all about the key updates in Calcite Design System recently released with 5.0, including the coordination of releases with ArcGIS Maps SDK for JavaScript’s move to semantic versioning in 2026.

Read on to explore some of the highlights since September, including:

CDN naming convention

Calcite and ArcGIS Maps SDK for JavaScript now offer coordinated versioning and CDN naming consistencies with version 5.0. The updated CDN improves productivity and enhances tooling support across solutions:


<script type="module" src="https://js.arcgis.com/calcite-components/5.0"></script>

Explore Calcite’s get started page to learn more about using the CDN and how to host assets locally for additional setup considerations.

Action redesign

Action has been updated to support more use cases – the default sizing has been adjusted and the component now supports a highlight display appearance.

Action Bar's highlight appearance using the selectionAppearance property provides more context and emphasizing selected states.

Disabled fullscreen functionality in Dialog

Dialog now includes a fullscreenDisabled property, which prevents the component’s full viewport display that blocks all visibility of underlying content on smaller width viewports. The property provides more configuration control over how the component and underlying content can be presented across screen resolutions, in particular mobile and tablet devices.

Comparison of Calcite's Dialog behavior on small screen sizes, taking up the full viewport by default or preventing that behavior when disabled.

Component grouping UI/UX

The Dropdown Group, Combobox Item Group, and List Item Group components offer uniform UI/UX experiences in 5.0 with updated font weights and color improvements for consistent experiences across apps.

Component groupings have improved UI/UX for selections with font weights and more distinct colors.

Refined prefix and suffix text

The InputInput Number, and Input Text components have refined the visual display of their prefixText and suffixText properties, reducing the possibility of mistaking them as clickable elements and promoting proper UI/UX decisions, ensuring users have less visual noise and clearer directions.

Comparison of Calcite's input prefix and suffix text visual presentation in version 5.0 with previous versions.

Enhanced pagination in Table

Table introduces a currentPage property, providing the ability to get or set the component’s current page when pagination is enabled. The property is useful to set the initial page on render, retrieve the current page, or programmatically change pages. Learn more in Calcite’s 5.0 summary notes.

Accessibility improvements

Action Group’s selection mode

Action Group now supports selection modes for slotted Actions, which offers the ability to select multiple grouped Actions. The selection modes provide keyboard usability improvements and enhanced context to assistive technologies to reach more audiences in your solutions.
Actions slotted in Action Bar with gap and padding consistently depicted across the component.

Action’s aria property

Action offers a new aria property, which overrides or extends ARIA-named attributes on the component’s button. For instance, the property can provide assistive technologies more context when an Action toggles another component’s visibility. Refer to Action’s accessibility section for configuration considerations.

Combobox’s read-only support

Combobox supports more audiences when it is not editable, but its contents are available to users. Now in 5.0, the component communicates it’s value to assistive technologies when in read-only mode.

5.0 breaking change highlights

Removed deprecated APIs

With the 5.0 release, Calcite removed deprecated components, properties, values, slots, and events. For instance, Action‘s tooltip slot where the Tooltip component can be used directly instead.

Removed components in 5.0 include: Modal, Shell Center Row, Tile Select, Tile Select Group, Tip, Tip Group, and Tip Manager.

To learn more about the full list of removals, visit the removed components, properties, values, slots, and events in the summary notes for the migration steps needed for 5.0.

Notice’s design updates

Notice now offers a minimal appearance, providing further visual distinction from the Alert component. In 5.0, Notice supports a range of inline message styling options, including an outline fill appearance for visual emphasis and a transparent appearance for less obtrusive messages.

Notice has a neutral kind and the status icons are now filled

Dark mode color mapping

Dark mode color mapping has been updated to align with light mode by ensuring background colors remain darker than foreground colors.
Comparison of the new dark mode color mapping as of version 5.0 to prior versions.

Color token naming updates

The background and foreground color tokens have been deprecated in favor of a combined set of surface color tokens, making color usage and theming easier to manage. To learn more about color tokens and theming, visit Calcite’s Colors and theming page.

Framework integration

With React 19+’s support of custom elements, the @esri/calcite-components-react package is not needed and deprecated in 5.0, with removal in a future breaking change release. Consider upgrading to React 19+ and using @esri/calcite-components directly to ensure full compatibility and support for the future.

Explore what’s new in 5.0

For a full list of changes, visit Calcite’s 5.0 summary notes, which also lists changes since version 3.3 (October 2025) including breaking changes, features, bug fixes, performance improvements, and more.

YouTube live

Later this month Calcite designers and engineers will present the Latest Updates in Version 5.0 showcasing breaking changes, feature enhancements, and engaging in a live Q&A session. RSVP on LinkedIn and join us live on Tuesday, February 24 at 9:30am PST to learn more.

2026 Developer and Technology Summit

The 2026 Developer and Technology Summit kicks off next month in Palm Springs March 10-13, 2026. We hope to meet you in Palm Springs, however if you are unable to join us in person there are a few live stream sessions for you to join us virtually.

Explore sessions on building web apps with components, including Calcite:

And attend user interface and user experience (UI/UX) sessions to incorporate into your apps in 2026:

Share this article

Leave a Reply