Coral Spectrum

screenshot of Coral Spectrum

Coral Spectrum

A JavaScript library of Web Components following Spectrum design patterns.


The Coral Spectrum Web Components is a project that aims to develop the Adobe Spectrum design language using web components, ES-Modules, and modern browser standards. It provides a JavaScript library of web components that follow Spectrum design patterns. The project focuses on consistency and compatibility with major frameworks like Angular, React, and Vue.js. Coral Spectrum is designed to support multiple browsers and includes built-in accessibility and internationalization support.


  • Component Examples: Showcase of various Coral Spectrum components in action.
  • API References: Detailed API documentation covering properties, events, and more for all components.
  • Playground: A sandboxed environment to experiment and preview code with the latest version of Coral Spectrum. Code can be shared by copy-pasting the URL.
  • Default Theme: Implementation of the Spectrum design specifications, providing elements and tools to help product teams work efficiently and make Adobe's applications more cohesive.
  • Compatibility with Major Frameworks: Compatible with Angular, React, and Vue.js, providing a complete and easy-to-use library of HTML components.
  • Browser Support: Designed to support the latest versions of Chrome, Safari, Firefox, Edge, IE 11, iOS 7+, and Android 4.4+.
  • Theme Options: Supports different themes like light, dark, lightest, and darkest, with the ability to specify the theme class at a higher level.
  • Large Scale Support: Supports larger tap targets on mobile controls by specifying the class coral--large at a higher level.
  • Built-in Accessibility and Keyboard Support: Every Coral Spectrum component is designed to be accessible and usable for all users.
  • Internationalization Support: Provides a robust internal system for internationalizing strings, supporting multiple languages.


To install the Coral Spectrum Web Components, follow these steps:

  1. Install the package using npm:
npm install @adobe/coral-spectrum
  1. Import the desired components in your project:
import { Button, TextField, Dialog } from '@adobe/coral-spectrum';
  1. Use the imported components in your HTML:
<button is="coral-button">Click me</button>
<input is="coral-textfield" placeholder="Enter your name">
<dialog is="coral-dialog">Hello, World!</dialog>


The Coral Spectrum Web Components project aims to bring the Adobe Spectrum design language to the web using web components and modern browser standards. It provides a library of components that follow Spectrum design patterns and are compatible with major frameworks. The project emphasizes consistency, browser support, accessibility, and internationalization. With features like a component showcase, API documentation, and a playground for code experimentation, Coral Spectrum offers developers a comprehensive solution for building web applications with the Spectrum design language.


Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.


RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.