Adobe-spectrum Packages

The Spectrum CSS Color slider component

The Spectrum CSS Color Area component

The Spectrum CSS Color Area component

The Spectrum CSS thumbnail component

The Spectrum CSS tray component

Use an `<sp-asset>` element to visually represent a file, folder or image in your application. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element

The Spectrum CSS dial component

`<sp-coachmark>` is a temporary message that educates users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.

An `<sp-meter>` is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions.

The Spectrum CSS underlay component

The Spectrum CSS slider component

An `<sp-color-area>` allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.

An `<sp-color-slider>` lets users visually change an individual channel of a color. The background of the `<sp-color-slider>` is a visual representation of the range of values a user can select from. This can represent color properties such as hues, color

An `<sp-color-wheel>` lets users visually change an individual channel of a color on a circular track.

The `<sp-color-handle>` is used to select a colour on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It functions similarly to the handle on an `<sp-slider>`.

An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

React wrapper for spectrum ui icons

React wrapper for spectrum workflow icons

UI Components for Vue based on Adobe Spectrum

Web component implementation of a Spectrum design Grid