Package Exports
- @esri/calcite-components
- @esri/calcite-components/calcite/calcite.css
- @esri/calcite-components/components/calcite-accordion
- @esri/calcite-components/components/calcite-accordion-item
- @esri/calcite-components/components/calcite-accordion-item/customElement
- @esri/calcite-components/components/calcite-accordion/customElement
- @esri/calcite-components/components/calcite-action
- @esri/calcite-components/components/calcite-action-bar
- @esri/calcite-components/components/calcite-action-bar/customElement
- @esri/calcite-components/components/calcite-action-group
- @esri/calcite-components/components/calcite-action-group/customElement
- @esri/calcite-components/components/calcite-action-menu
- @esri/calcite-components/components/calcite-action-menu/customElement
- @esri/calcite-components/components/calcite-action-pad
- @esri/calcite-components/components/calcite-action-pad/customElement
- @esri/calcite-components/components/calcite-action/customElement
- @esri/calcite-components/components/calcite-alert
- @esri/calcite-components/components/calcite-alert/customElement
- @esri/calcite-components/components/calcite-autocomplete
- @esri/calcite-components/components/calcite-autocomplete-item
- @esri/calcite-components/components/calcite-autocomplete-item-group
- @esri/calcite-components/components/calcite-autocomplete-item-group/customElement
- @esri/calcite-components/components/calcite-autocomplete-item/customElement
- @esri/calcite-components/components/calcite-autocomplete/customElement
- @esri/calcite-components/components/calcite-avatar
- @esri/calcite-components/components/calcite-avatar/customElement
- @esri/calcite-components/components/calcite-block
- @esri/calcite-components/components/calcite-block-group
- @esri/calcite-components/components/calcite-block-group/customElement
- @esri/calcite-components/components/calcite-block-section
- @esri/calcite-components/components/calcite-block-section/customElement
- @esri/calcite-components/components/calcite-block/customElement
- @esri/calcite-components/components/calcite-button
- @esri/calcite-components/components/calcite-button/customElement
- @esri/calcite-components/components/calcite-card
- @esri/calcite-components/components/calcite-card-group
- @esri/calcite-components/components/calcite-card-group/customElement
- @esri/calcite-components/components/calcite-card/customElement
- @esri/calcite-components/components/calcite-carousel
- @esri/calcite-components/components/calcite-carousel-item
- @esri/calcite-components/components/calcite-carousel-item/customElement
- @esri/calcite-components/components/calcite-carousel/customElement
- @esri/calcite-components/components/calcite-checkbox
- @esri/calcite-components/components/calcite-checkbox/customElement
- @esri/calcite-components/components/calcite-chip
- @esri/calcite-components/components/calcite-chip-group
- @esri/calcite-components/components/calcite-chip-group/customElement
- @esri/calcite-components/components/calcite-chip/customElement
- @esri/calcite-components/components/calcite-color-picker
- @esri/calcite-components/components/calcite-color-picker-hex-input
- @esri/calcite-components/components/calcite-color-picker-hex-input/customElement
- @esri/calcite-components/components/calcite-color-picker-swatch
- @esri/calcite-components/components/calcite-color-picker-swatch/customElement
- @esri/calcite-components/components/calcite-color-picker/customElement
- @esri/calcite-components/components/calcite-combobox
- @esri/calcite-components/components/calcite-combobox-item
- @esri/calcite-components/components/calcite-combobox-item-group
- @esri/calcite-components/components/calcite-combobox-item-group/customElement
- @esri/calcite-components/components/calcite-combobox-item/customElement
- @esri/calcite-components/components/calcite-combobox/customElement
- @esri/calcite-components/components/calcite-date-picker
- @esri/calcite-components/components/calcite-date-picker-day
- @esri/calcite-components/components/calcite-date-picker-day/customElement
- @esri/calcite-components/components/calcite-date-picker-month
- @esri/calcite-components/components/calcite-date-picker-month-header
- @esri/calcite-components/components/calcite-date-picker-month-header/customElement
- @esri/calcite-components/components/calcite-date-picker-month/customElement
- @esri/calcite-components/components/calcite-date-picker/customElement
- @esri/calcite-components/components/calcite-dialog
- @esri/calcite-components/components/calcite-dialog/customElement
- @esri/calcite-components/components/calcite-dropdown
- @esri/calcite-components/components/calcite-dropdown-group
- @esri/calcite-components/components/calcite-dropdown-group/customElement
- @esri/calcite-components/components/calcite-dropdown-item
- @esri/calcite-components/components/calcite-dropdown-item/customElement
- @esri/calcite-components/components/calcite-dropdown/customElement
- @esri/calcite-components/components/calcite-fab
- @esri/calcite-components/components/calcite-fab/customElement
- @esri/calcite-components/components/calcite-filter
- @esri/calcite-components/components/calcite-filter/customElement
- @esri/calcite-components/components/calcite-flow
- @esri/calcite-components/components/calcite-flow-item
- @esri/calcite-components/components/calcite-flow-item/customElement
- @esri/calcite-components/components/calcite-flow/customElement
- @esri/calcite-components/components/calcite-graph
- @esri/calcite-components/components/calcite-graph/customElement
- @esri/calcite-components/components/calcite-handle
- @esri/calcite-components/components/calcite-handle/customElement
- @esri/calcite-components/components/calcite-icon
- @esri/calcite-components/components/calcite-icon/customElement
- @esri/calcite-components/components/calcite-inline-editable
- @esri/calcite-components/components/calcite-inline-editable/customElement
- @esri/calcite-components/components/calcite-input
- @esri/calcite-components/components/calcite-input-date-picker
- @esri/calcite-components/components/calcite-input-date-picker/customElement
- @esri/calcite-components/components/calcite-input-message
- @esri/calcite-components/components/calcite-input-message/customElement
- @esri/calcite-components/components/calcite-input-number
- @esri/calcite-components/components/calcite-input-number/customElement
- @esri/calcite-components/components/calcite-input-text
- @esri/calcite-components/components/calcite-input-text/customElement
- @esri/calcite-components/components/calcite-input-time-picker
- @esri/calcite-components/components/calcite-input-time-picker/customElement
- @esri/calcite-components/components/calcite-input-time-zone
- @esri/calcite-components/components/calcite-input-time-zone/customElement
- @esri/calcite-components/components/calcite-input/customElement
- @esri/calcite-components/components/calcite-label
- @esri/calcite-components/components/calcite-label/customElement
- @esri/calcite-components/components/calcite-link
- @esri/calcite-components/components/calcite-link/customElement
- @esri/calcite-components/components/calcite-list
- @esri/calcite-components/components/calcite-list-item
- @esri/calcite-components/components/calcite-list-item-group
- @esri/calcite-components/components/calcite-list-item-group/customElement
- @esri/calcite-components/components/calcite-list-item/customElement
- @esri/calcite-components/components/calcite-list/customElement
- @esri/calcite-components/components/calcite-loader
- @esri/calcite-components/components/calcite-loader/customElement
- @esri/calcite-components/components/calcite-menu
- @esri/calcite-components/components/calcite-menu-item
- @esri/calcite-components/components/calcite-menu-item/customElement
- @esri/calcite-components/components/calcite-menu/customElement
- @esri/calcite-components/components/calcite-meter
- @esri/calcite-components/components/calcite-meter/customElement
- @esri/calcite-components/components/calcite-modal
- @esri/calcite-components/components/calcite-modal/customElement
- @esri/calcite-components/components/calcite-navigation
- @esri/calcite-components/components/calcite-navigation-logo
- @esri/calcite-components/components/calcite-navigation-logo/customElement
- @esri/calcite-components/components/calcite-navigation-user
- @esri/calcite-components/components/calcite-navigation-user/customElement
- @esri/calcite-components/components/calcite-navigation/customElement
- @esri/calcite-components/components/calcite-notice
- @esri/calcite-components/components/calcite-notice/customElement
- @esri/calcite-components/components/calcite-option
- @esri/calcite-components/components/calcite-option-group
- @esri/calcite-components/components/calcite-option-group/customElement
- @esri/calcite-components/components/calcite-option/customElement
- @esri/calcite-components/components/calcite-pagination
- @esri/calcite-components/components/calcite-pagination/customElement
- @esri/calcite-components/components/calcite-panel
- @esri/calcite-components/components/calcite-panel/customElement
- @esri/calcite-components/components/calcite-popover
- @esri/calcite-components/components/calcite-popover/customElement
- @esri/calcite-components/components/calcite-progress
- @esri/calcite-components/components/calcite-progress/customElement
- @esri/calcite-components/components/calcite-radio-button
- @esri/calcite-components/components/calcite-radio-button-group
- @esri/calcite-components/components/calcite-radio-button-group/customElement
- @esri/calcite-components/components/calcite-radio-button/customElement
- @esri/calcite-components/components/calcite-rating
- @esri/calcite-components/components/calcite-rating/customElement
- @esri/calcite-components/components/calcite-scrim
- @esri/calcite-components/components/calcite-scrim/customElement
- @esri/calcite-components/components/calcite-segmented-control
- @esri/calcite-components/components/calcite-segmented-control-item
- @esri/calcite-components/components/calcite-segmented-control-item/customElement
- @esri/calcite-components/components/calcite-segmented-control/customElement
- @esri/calcite-components/components/calcite-select
- @esri/calcite-components/components/calcite-select/customElement
- @esri/calcite-components/components/calcite-sheet
- @esri/calcite-components/components/calcite-sheet/customElement
- @esri/calcite-components/components/calcite-shell
- @esri/calcite-components/components/calcite-shell-center-row
- @esri/calcite-components/components/calcite-shell-center-row/customElement
- @esri/calcite-components/components/calcite-shell-panel
- @esri/calcite-components/components/calcite-shell-panel/customElement
- @esri/calcite-components/components/calcite-shell/customElement
- @esri/calcite-components/components/calcite-slider
- @esri/calcite-components/components/calcite-slider/customElement
- @esri/calcite-components/components/calcite-sort-handle
- @esri/calcite-components/components/calcite-sort-handle/customElement
- @esri/calcite-components/components/calcite-sortable-list
- @esri/calcite-components/components/calcite-sortable-list/customElement
- @esri/calcite-components/components/calcite-split-button
- @esri/calcite-components/components/calcite-split-button/customElement
- @esri/calcite-components/components/calcite-stack
- @esri/calcite-components/components/calcite-stack/customElement
- @esri/calcite-components/components/calcite-stepper
- @esri/calcite-components/components/calcite-stepper-item
- @esri/calcite-components/components/calcite-stepper-item/customElement
- @esri/calcite-components/components/calcite-stepper/customElement
- @esri/calcite-components/components/calcite-switch
- @esri/calcite-components/components/calcite-switch/customElement
- @esri/calcite-components/components/calcite-tab
- @esri/calcite-components/components/calcite-tab-nav
- @esri/calcite-components/components/calcite-tab-nav/customElement
- @esri/calcite-components/components/calcite-tab-title
- @esri/calcite-components/components/calcite-tab-title/customElement
- @esri/calcite-components/components/calcite-tab/customElement
- @esri/calcite-components/components/calcite-table
- @esri/calcite-components/components/calcite-table-cell
- @esri/calcite-components/components/calcite-table-cell/customElement
- @esri/calcite-components/components/calcite-table-header
- @esri/calcite-components/components/calcite-table-header/customElement
- @esri/calcite-components/components/calcite-table-row
- @esri/calcite-components/components/calcite-table-row/customElement
- @esri/calcite-components/components/calcite-table/customElement
- @esri/calcite-components/components/calcite-tabs
- @esri/calcite-components/components/calcite-tabs/customElement
- @esri/calcite-components/components/calcite-text-area
- @esri/calcite-components/components/calcite-text-area/customElement
- @esri/calcite-components/components/calcite-tile
- @esri/calcite-components/components/calcite-tile-group
- @esri/calcite-components/components/calcite-tile-group/customElement
- @esri/calcite-components/components/calcite-tile-select
- @esri/calcite-components/components/calcite-tile-select-group
- @esri/calcite-components/components/calcite-tile-select-group/customElement
- @esri/calcite-components/components/calcite-tile-select/customElement
- @esri/calcite-components/components/calcite-tile/customElement
- @esri/calcite-components/components/calcite-time-picker
- @esri/calcite-components/components/calcite-time-picker/customElement
- @esri/calcite-components/components/calcite-tip
- @esri/calcite-components/components/calcite-tip-group
- @esri/calcite-components/components/calcite-tip-group/customElement
- @esri/calcite-components/components/calcite-tip-manager
- @esri/calcite-components/components/calcite-tip-manager/customElement
- @esri/calcite-components/components/calcite-tip/customElement
- @esri/calcite-components/components/calcite-tooltip
- @esri/calcite-components/components/calcite-tooltip/customElement
- @esri/calcite-components/components/calcite-tree
- @esri/calcite-components/components/calcite-tree-item
- @esri/calcite-components/components/calcite-tree-item/customElement
- @esri/calcite-components/components/calcite-tree/customElement
- @esri/calcite-components/dist/calcite/calcite.css
- @esri/calcite-components/dist/components
- @esri/calcite-components/dist/components/calcite-accordion
- @esri/calcite-components/dist/components/calcite-accordion-item
- @esri/calcite-components/dist/components/calcite-action
- @esri/calcite-components/dist/components/calcite-action-bar
- @esri/calcite-components/dist/components/calcite-action-group
- @esri/calcite-components/dist/components/calcite-action-menu
- @esri/calcite-components/dist/components/calcite-action-pad
- @esri/calcite-components/dist/components/calcite-alert
- @esri/calcite-components/dist/components/calcite-autocomplete
- @esri/calcite-components/dist/components/calcite-autocomplete-item
- @esri/calcite-components/dist/components/calcite-autocomplete-item-group
- @esri/calcite-components/dist/components/calcite-avatar
- @esri/calcite-components/dist/components/calcite-block
- @esri/calcite-components/dist/components/calcite-block-group
- @esri/calcite-components/dist/components/calcite-block-section
- @esri/calcite-components/dist/components/calcite-button
- @esri/calcite-components/dist/components/calcite-card
- @esri/calcite-components/dist/components/calcite-card-group
- @esri/calcite-components/dist/components/calcite-carousel
- @esri/calcite-components/dist/components/calcite-carousel-item
- @esri/calcite-components/dist/components/calcite-checkbox
- @esri/calcite-components/dist/components/calcite-chip
- @esri/calcite-components/dist/components/calcite-chip-group
- @esri/calcite-components/dist/components/calcite-color-picker
- @esri/calcite-components/dist/components/calcite-color-picker-hex-input
- @esri/calcite-components/dist/components/calcite-color-picker-swatch
- @esri/calcite-components/dist/components/calcite-combobox
- @esri/calcite-components/dist/components/calcite-combobox-item
- @esri/calcite-components/dist/components/calcite-combobox-item-group
- @esri/calcite-components/dist/components/calcite-date-picker
- @esri/calcite-components/dist/components/calcite-date-picker-day
- @esri/calcite-components/dist/components/calcite-date-picker-month
- @esri/calcite-components/dist/components/calcite-date-picker-month-header
- @esri/calcite-components/dist/components/calcite-dialog
- @esri/calcite-components/dist/components/calcite-dropdown
- @esri/calcite-components/dist/components/calcite-dropdown-group
- @esri/calcite-components/dist/components/calcite-dropdown-item
- @esri/calcite-components/dist/components/calcite-fab
- @esri/calcite-components/dist/components/calcite-filter
- @esri/calcite-components/dist/components/calcite-flow
- @esri/calcite-components/dist/components/calcite-flow-item
- @esri/calcite-components/dist/components/calcite-graph
- @esri/calcite-components/dist/components/calcite-handle
- @esri/calcite-components/dist/components/calcite-icon
- @esri/calcite-components/dist/components/calcite-inline-editable
- @esri/calcite-components/dist/components/calcite-input
- @esri/calcite-components/dist/components/calcite-input-date-picker
- @esri/calcite-components/dist/components/calcite-input-message
- @esri/calcite-components/dist/components/calcite-input-number
- @esri/calcite-components/dist/components/calcite-input-text
- @esri/calcite-components/dist/components/calcite-input-time-picker
- @esri/calcite-components/dist/components/calcite-input-time-zone
- @esri/calcite-components/dist/components/calcite-label
- @esri/calcite-components/dist/components/calcite-link
- @esri/calcite-components/dist/components/calcite-list
- @esri/calcite-components/dist/components/calcite-list-item
- @esri/calcite-components/dist/components/calcite-list-item-group
- @esri/calcite-components/dist/components/calcite-loader
- @esri/calcite-components/dist/components/calcite-menu
- @esri/calcite-components/dist/components/calcite-menu-item
- @esri/calcite-components/dist/components/calcite-meter
- @esri/calcite-components/dist/components/calcite-modal
- @esri/calcite-components/dist/components/calcite-navigation
- @esri/calcite-components/dist/components/calcite-navigation-logo
- @esri/calcite-components/dist/components/calcite-navigation-user
- @esri/calcite-components/dist/components/calcite-notice
- @esri/calcite-components/dist/components/calcite-option
- @esri/calcite-components/dist/components/calcite-option-group
- @esri/calcite-components/dist/components/calcite-pagination
- @esri/calcite-components/dist/components/calcite-panel
- @esri/calcite-components/dist/components/calcite-popover
- @esri/calcite-components/dist/components/calcite-progress
- @esri/calcite-components/dist/components/calcite-radio-button
- @esri/calcite-components/dist/components/calcite-radio-button-group
- @esri/calcite-components/dist/components/calcite-rating
- @esri/calcite-components/dist/components/calcite-scrim
- @esri/calcite-components/dist/components/calcite-segmented-control
- @esri/calcite-components/dist/components/calcite-segmented-control-item
- @esri/calcite-components/dist/components/calcite-select
- @esri/calcite-components/dist/components/calcite-sheet
- @esri/calcite-components/dist/components/calcite-shell
- @esri/calcite-components/dist/components/calcite-shell-center-row
- @esri/calcite-components/dist/components/calcite-shell-panel
- @esri/calcite-components/dist/components/calcite-slider
- @esri/calcite-components/dist/components/calcite-sort-handle
- @esri/calcite-components/dist/components/calcite-sortable-list
- @esri/calcite-components/dist/components/calcite-split-button
- @esri/calcite-components/dist/components/calcite-stack
- @esri/calcite-components/dist/components/calcite-stepper
- @esri/calcite-components/dist/components/calcite-stepper-item
- @esri/calcite-components/dist/components/calcite-switch
- @esri/calcite-components/dist/components/calcite-tab
- @esri/calcite-components/dist/components/calcite-tab-nav
- @esri/calcite-components/dist/components/calcite-tab-title
- @esri/calcite-components/dist/components/calcite-table
- @esri/calcite-components/dist/components/calcite-table-cell
- @esri/calcite-components/dist/components/calcite-table-header
- @esri/calcite-components/dist/components/calcite-table-row
- @esri/calcite-components/dist/components/calcite-tabs
- @esri/calcite-components/dist/components/calcite-text-area
- @esri/calcite-components/dist/components/calcite-tile
- @esri/calcite-components/dist/components/calcite-tile-group
- @esri/calcite-components/dist/components/calcite-tile-select
- @esri/calcite-components/dist/components/calcite-tile-select-group
- @esri/calcite-components/dist/components/calcite-time-picker
- @esri/calcite-components/dist/components/calcite-tip
- @esri/calcite-components/dist/components/calcite-tip-group
- @esri/calcite-components/dist/components/calcite-tip-manager
- @esri/calcite-components/dist/components/calcite-tooltip
- @esri/calcite-components/dist/components/calcite-tree
- @esri/calcite-components/dist/components/calcite-tree-item
- @esri/calcite-components/dist/loader
- @esri/calcite-components/docs/api.json
- @esri/calcite-components/docs/docs.json
- @esri/calcite-components/docs/supported-browsers.json
- @esri/calcite-components/docs/translations.json
- @esri/calcite-components/docs/vscode.css-custom-data.json
- @esri/calcite-components/docs/vscode.html-custom-data.json
- @esri/calcite-components/docs/web-types.json
- @esri/calcite-components/hydrate
- @esri/calcite-components/loader
- @esri/calcite-components/package.json
- @esri/calcite-components/types/components
- @esri/calcite-components/types/lumina
- @esri/calcite-components/types/preact
- @esri/calcite-components/types/react
- @esri/calcite-components/types/stencil
Readme
Calcite components
Calcite components, part of Esri's Calcite Design System, is a rich library of flexible, framework-agnostic web components for building applications. View the documentation for component descriptions, examples, and API reference, which includes properties, slots, styles, and theming.
Use the CDN
The most common approach for loading Calcite components is to use the version hosted on the CDN. The components can be loaded via <script>
and <link>
tags in the head of your HTML document:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@3.1.0/dist/calcite/calcite.esm.js"
></script>
Once these tags are added, components can be used like any other HTML element. Only components that are used in the application will be loaded.
Use the NPM package
Refer to the Get started page for details on setting up the NPM package.
TypeScript
Refer to the Framework integration resource page for guidance on setting up TypeScript.
Browser support
Chrome |
Firefox |
Safari |
Edge |
---|---|---|---|
Last 2 versions ✔ |
Contributing
We welcome contributions to this project. See CONTRIBUTING.md for an overview of contribution guidelines.
License
COPYRIGHT © 2025 Esri
All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
For additional information, refer to Calcite's licensing and contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
email: contracts@esri.com