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

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

View components

Icon library

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

View icons

UI kits

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

View kits

Get started

To start building web applications with the Calcite Design System, you need an 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.

<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.67/calcite.esm.js"></script>
<script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.67/calcite.js"></script>

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

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

NextGetting started

DocumentationCalcite Design System (Beta)

Overview

Was this page helpful?

Was this page helpful?

DocumentationCalcite Design System (Beta)

Overview

Components

Icon library

UI kits

Get started

1. Sign in with your ArcGIS Account

2. Quick start

Was this page helpful?

Was this page helpful?