Current Version 1.0.0-rc.9
Size 198kB
Size (Gzipped) 25kB
Last Update March 22, 2018

A Design & Development Framework

Calcite Web is a branded CSS & JavaScript framework, web style guide, and visual design system for Esri. You can use Calcite Web to quickly build on-brand, lightweight, and accessible websites. The robust codebase is well supported, steadily maintained, and always being improved.

Calcite Web has everything you need to quickly build excellent web experiences and a collection of extensions that enable specific use cases like marketing pages and e-commerce.

Easy to Get Started

Use Calcite Web from your favorite package manager, download it, or just use it off the CDN.

Package Managers

Calcite Web can be installed as a Ruby Gem or an NPM package.

Get instructions


Calcite Web can also be referenced directly from the CDN:

<link rel="stylesheet" href="">
<script src=""></script>


Small, reusable elements in a design like buttons, dropdowns, and tooltips


Larger design patterns like navigation, tabs, and accordions


Iconography for both social media and user interfaces


Fully responsive, twenty-four column grid for layout


Type styles, size, color, and helpful modifier classes


Simplified Esri color pallette available as Sass variables

Copy, Paste

Using Calcite Web's design patterns is as easy as copy paste. The Quickstart Guide explains how to include the framework in your project, lay out basic page structures with the grid system, and use the UI Patterns to present content.

Read the Quickstart Guide

Comprehensive & Extendable

Calcite Web has all the building blocks you need to create most projects, but sometimes you might need a little extra. This is why we've created a set of extensions to Calcite Web to handle situations like e-commerce and splashy marketing pages. Just include a line of CSS, and start working from the examples.

Learn More About Extensions