Overview

Calcite Design System is a collection of design and development resources for creating beautiful, easy to use, cohesive experiences across apps with minimal effort. It includes design best practices, icons, color schemes, and an accessible web component library with UI elements such as buttons, panels, accordions, alerts, and many more.

Components

Components

A rich library of responsive, flexible, framework-agnostic web components for building your web app.

View components

Icons

Icon library

Thousands of icons to use throughout your project, from UI icons to map symbology.

View icons

UI kits

UI kits

The UI-Kit enables you to design with all Calcite components, icons, and colors in Sketch.

View kits

Get started

To start building web applications with the Calcite Design System, you need an ArcGIS account.

1. Sign in with your ArcGIS Account

Don't have an ArcGIS account?

Get a free developer account

2. Quick start

To use components:

Place the JS and CSS files in your document head and you are ready to go.

    
1
2
3
4
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.52/calcite.esm.js"></script>
<script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.52/calcite.js"></script>

<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.52/calcite.css" />

You can now copy and paste code snippets from components into your application.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.