A monorepo containing Esri's Calcite Design System packages for building consistent, accessible web applications.
Calcite Design System is a monorepo containing Esri's comprehensive design system packages for building web applications. It provides reusable UI components, design tokens, icons, and tooling to create consistent and accessible user interfaces. The system is particularly well-suited for geospatial applications but can be used for any web project requiring a robust design foundation.
Frontend developers and design teams building web applications, especially those in the mapping and geospatial domain who need consistent, accessible UI components. Teams working across multiple frameworks who want a unified design language.
Developers choose Calcite Design System for its comprehensive approach—offering not just components but a complete design ecosystem with tokens, icons, and framework integrations. Its strong accessibility focus and Esri's backing make it particularly valuable for enterprise applications requiring reliability and consistency.
A monorepo containing the packages for Esri's Calcite Design System
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Built with Stencil as web components, they work across any JavaScript framework, providing flexibility for diverse tech stacks as mentioned in the key features.
Includes not just UI components but also design tokens, a dedicated icon library, and ESLint tooling, ensuring consistency and scalability for large projects.
Emphasizes accessible user interfaces out of the box, aligning with WCAG standards, which is crucial for enterprise and geospatial applications.
Provides React bindings for seamless use in React applications, reducing integration friction and improving developer experience.
Tightly coupled with Esri's ecosystem and licensing (Master License Agreement), which may impose restrictions or complexities for commercial use outside Esri projects.
The README redirects to package-specific READMEs, scattering information and potentially increasing the learning curve for newcomers.
Official bindings are only for React; other frameworks like Vue or Angular require custom integration, despite the web component foundation.
The comprehensive monorepo and web component approach can add bundle size and initial load time compared to leaner UI libraries.