Coral Spectrum

A JavaScript library of Web Components following Spectrum design patterns.
Alternatives To Coral Spectrum
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Ionicons17,08725,24884513 days ago151July 10, 2023287mitTypeScript
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Omi12,742229619 hours ago278May 18, 2023104otherJavaScript
Web Components Framework - Web组件框架
Dark Mode Toggle1,0843a month ago55April 17, 2023apache-2.0JavaScript
A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
Glyphs25997 months ago15August 12, 20217mitJavaScript
Dynamic design system for building and managing large icon sets in Figma and packaging them for the web
a year ago1mitJavaScript
Web Components to turn your web app into a fake operating system
Vanilla Hamburger117
8 months ago5October 23, 20201mitTypeScript
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Coral Spectrum1042a month ago172May 18, 202354apache-2.0JavaScript
A JavaScript library of Web Components following Spectrum design patterns.
33 years ago82August 31, 202064bsd-3-clauseJavaScript
A design library for building Location Intelligence applications.
Vaadin Icons581152 years ago11March 18, 2019apache-2.0HTML
Vaadin Icons is a collection of 600+ unique icons designed for web applications
Toggle Icon21
5 years ago4JavaScript
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Alternatives To Coral Spectrum
Select To Compare

Alternative Project Comparisons

Checkout Spectrum Web Components which is a future-looking project to develop Adobe Spectrum design language based around web components, ES-Modules, and modern browser standards.

Coral Spectrum Build Status

A JavaScript library of Web Components following Spectrum design patterns.


Please follow the Commit Message Conventions. To easily comply, it is recommended to use cz-cli.


Component Examples

To see all components in action. These are only examples and don't cover all scenarios.

API References

Covers the API for all components including properties, events and more.


Experiment and preview code with the latest Coral Spectrum version. Code can be shared by copy pasting the URL. The playground is sandboxed to prevent security risks.


The current default theme is is an implementation of the Spectrum design specifications, Adobe’s design system. Spectrum provides elements and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.

Coral Spectrum leverages the Spectrum CSS framework to style components including the Spectrum SVG icons.

Angular, React, Vue.js compatibility

Our vision is to create consistent Adobe experiences by providing a complete, easy to use library of HTML components compatible with major frameworks.

To reach the goal, Coral Spectrum derives from Custom Elements v1 with native support thanks to broad collaboration between browser vendors. The use of custom elements gives us the ability to hide many implementation details from the consumer, allowing much more freedom to change the underlying markup that supports those elements. This makes the exposed API smaller and more explicit, resulting in a lower risk of updates to Coral Spectrum needing to introduce breaking changes.

Browser support

Coral Spectrum is designed to support the following browsers:

  • Chrome (latest)
  • Safari (latest)
  • Firefox (latest)
  • Edge (latest)
  • IE 11
  • iOS 7+
  • Android 4.4+

Theme (light, dark, lightest, darkest)

The default Coral Spectrum styles cascade from coral--light, coral--lightest, coral--dark and coral--darkest theme, so that class must be specified at a higher level.

<body class="coral--light">
    <!-- light theme -->
    <div class="container"></div>
    <div class="coral--dark">
        <!-- dark theme -->

Large scale support

For mobile, Spectrum has a larger scale that enables larger tap targets on all controls. To enable it, the class coral--large must be specified at a higher level.

<body class="coral--light coral--large">
   <!-- light theme -->
   <!-- large scale -->

Built-in Accessibility and Keyboard support

Having an inaccessible application can mean thousands of dollars of fines if you land a government contract. It also means alienating an entire segment of society by making your application completely unusable to them. To help you avoid this, we’ve made it a rule that every Coral Spectrum component should be accessible.

Internationalization support

Coral Spectrum provides a robust internal system for internationalization of its strings. This is done via an internal Adobe process.

Supported languages are :

Language family Language tag Language variant
English en-US American English
French fr-FR Standard French
German de-DE Standard German
Italian it-IT Standard Italian
Spanish es-ES Castilian Spanish
Portuguese pt-BR Brazilian Portuguese
Japanese ja-JP Standard Japanese
Korean ko-KR Standard Korean
Chinese zh-CN Mainland China, simplified characters
Chinese zh-TW Taiwan, traditional characters
Dutch nl-NL Netherlands Dutch
Danish da-DK Standard Danish
Finnish fi-FI Standard Finnish
Norwegian no-NO Standard Norwegian
Swedish sv-SE Standard Swedish
Czech cs-CZ Standard Czech
Polish pl-PL Standard Polish
Russian ru-RU Standard Russian
Turkish tr-TR Standard Turkish

Using Coral Spectrum

Easiest way via a CDN

The easiest way to consume Coral Spectrum is to use a CDN e.g. copy these lines into your html file.

  <!-- 4.x.x means latest major 4 version release, adjust version if you need a specific one -->
  <link rel="stylesheet" href="[email protected]/dist/css/coral.min.css">
  <script src="[email protected]/dist/js/coral.min.js" data-coral-icons-external="js"></script>
<body class="coral--light">
  <button is="coral-button" icon="add">My Button</button>

Copying the distribution files

You can download a packaged/published version of @adobe/coral-spectrum from npm:

npm pack @adobe/coral-spectrum

After you've unzipped the downloaded package, look for the dist folder and :

  • Copy the files from dist/css, dist/js and dist/resources in your project.
  • Reference the files in your page e.g
<link rel="stylesheet" href="css/coral.min.css">
<script src="js/coral.min.js"></script>

Including entire library with a bundler like parcel

npm install @adobe/coral-spectrum

then in your main js, use:


Including only the components you need

If your project only requires a few components, you can use a module bundler like Webpack to only import the components needed. Below is an example of a Webpack config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    filename: 'bundle.min.js',
    path: path.resolve(__dirname, 'dist')
  module: {
    rules: [
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
        test: /\.svg$/,
        use: [
            loader: 'file-loader',
            options: {
              name: 'icons/[name].[ext]'
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.min.css'
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /style\.min\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],

Then in your index.js file, you can import and use single components :

// Import Component
import {Button} from '@adobe/coral-spectrum/coral-component-button';

const button = new Button();

If icons are not displayed, ensure the path to the styles and icons are set e.g. :

<link rel="stylesheet" href="dist/style.min.css">
<script data-coral-icons="dist/icons/" src="dist/bundle.min.js"></script>

If icons still do not display, you can try setting them to display as inline SVGs, instead of external resources. Coral Spectrum will default to external resources on browsers other than IE11. Using the previous example, this option can be set with:

<link rel="stylesheet" href="dist/style.min.css">
<script data-coral-icons="dist/icons/" data-coral-icons-external="off" src="dist/bundle.min.js"></script>

Note: Calendar, Clock and Datepicker components will leverage moment.js if available.


Check out the contributing guidelines.

Building and Testing

Run the following commands first :

npm install -g gulp-cli
npm install

You can use below tasks to get started:

  • gulp to generate the build in the dist folder and run the dev server on localhost:9001 by default.
  • gulp build to generate the build in the dist folder.
  • gulp dev to run the dev server on localhost:9001 by default.
  • gulp test to run the tests. Test reports are in dist/coverage.
  • gulp docs to build the documentation in dist/documentation.
  • gulp axe to run the accessibility checks.

Each component can be built independently e.g. cd coral-component-button && gulp.


Automatic release:

Merging the PR to master will trigger an automatic release Github Action. It is important to follow Angular Commit Message Conventions. It is recommended to use cz-cli for easy commits. Only fix and feat can trigger a release. If you want to skip release add [skip release] or [release skip] to the commit message

Manual releasing:

We are currently releasing this package on npm.

Before we get started, clean up your dependencies with the following command :

git checkout master
rm -rf node_modules && npm install

Then run gulp release. You'll be asked to bump the version (minor version bump by default). Coral Spectrum is following semantic versioning (either patch, minor or major).

The command will take care of increasing, tagging the version and publishing the package to npm.

If everything went well, run gulp deploy to publish the documentation on the gh-pages branch else revert the version bump.

Popular Icon Projects
Popular Webcomponents Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Custom Elements