JSPM

An `<sp-avatar>` is a great way to feature a visual representation of a user.

`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are invariable.

Web component implementation of a Spectrum design InfieldButton

`sp-dialog` displays important information that users need to acknowledge. They appear over the interface and block further interactions. When used directly the `sp-dialog` element surfaces a `slot` based API for deep customization of the content to be in

An `<sp-switch>` is used to turn an option on or off. Switches allow users to select the state of a single option at a time. Use a switch rather than a checkbox when activating (or deactivating) an option, instead of selecting.

An `<sp-field-group>` element is used to layout a group of fields, usually `<sp-checkbox>` elements. It can be leveraged for `vertical` or `horizontal` organization of the fields that are supplied as its children.

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>`.

Web component implementation of a Spectrum design Table

An `<sp-progress-bar>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.

The `<sp-accordion>` element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a

A `<sp-dropzone>` is an area on the screen into which an object can be dragged and dropped to accomplish a task. For example, a DropZone might be used in an upload workflow to enable the user to drop a file from their operating system into the DropZone, w

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

`<sp-radio>` and [`<sp-radio-group>`](../radio-group) allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.

The Spectrum CSS card component

The `<sp-icons-medium>` and `<sp-icons-large>` elements included in this package supply your application with the Spectrum CSS medium and large icons for use in the `<sp-icon>` element. Include at least one of these elements in a project that makes use of

Web component implementation of a Spectrum design AlertDialog

The `opacity-checkerboard` class is used to highlight opacity. Leverage these styles in your component as outlined below to unify you application's visuals with those delivered by various Spectrum Web Components.

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.

An `<sp-card>` represents a rectangular card that contains a variety of text and image layouts. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs.

The Spectrum CSS action button component

An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. `sp-thumbnail` elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such

The Spectrum CSS typography component

An `<sp-illustrated-message>` displays an illustration icon and a message, usually in an empty state or on an error page. It is also used inside a DropZone.

The Spectrum CSS button component

Web component implementation of a Spectrum design Tags

A `<sp-action-bar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `<sp-action-bar>` can be deployed in two variants beyond the default: `[varient="fixed"]` to position the element in rela

Web component implementation of a Spectrum design Grid

`<sp-top-nav>` delivers site navigation, particularly for when that navigation will change the majority of the page's content and/or the page's URL when selected. All primary elements of an `<sp-top-nav>` should be directly accessible in the tab order.

The Spectrum CSS table component

The Spectrum CSS tooltip component

Web component implementation of a Spectrum design Swatch

An `sp-split-view` element delivers its first two direct child elements in a horizontal or vertical (`<sp-split-view vertical>`) orientation that distributes the available page real estate as per the supplied attribute API. When leveraging the resizable a

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

Web component implementation of a Spectrum design ContextualHelp

Web component implementation of a Spectrum design PickerButton

The Spectrum CSS checkbox component

The Spectrum CSS menu component

The Spectrum CSS buttongroup component

The Spectrum CSS toast component

The Spectrum CSS progress bar component

The Spectrum CSS icon component

The Spectrum CSS divider component

The Spectrum CSS link component

The Spectrum CSS accordion component

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

The Spectrum CSS textfield 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.

The Spectrum CSS dialog component

The Spectrum CSS underlay component

The Spectrum CSS tokens package

The Spectrum CSS switch component

`@spectrum-web-components/bundle` is a master dependency that allows a project to import any and all of the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages collect

The Spectrum CSS in-line alert component

The Spectrum CSS modal component

The Spectrum CSS slider component

The Spectrum CSS page component

The Spectrum CSS tabs component

The Spectrum CSS popover component

The Spectrum CSS actiongroup component

The Spectrum CSS picker component

The Spectrum CSS tags component

The Spectrum CSS progress circle component

The Spectrum CSS fieldlabel component

The Spectrum CSS dropzone component

The Spectrum CSS search component

The Spectrum CSS sidenav component

The Spectrum CSS avatar component

The Spectrum CSS Pagination component

The Spectrum CSS calendar component

The Spectrum CSS breadcrumb component

The Spectrum CSS illustratedmessage component

The Spectrum CSS Tree view component

The Spectrum CSS radio component

The Spectrum CSS statuslight component

The Spectrum CSS stepper component

Web component implementation of a Spectrum design Combobox

Web component implementation of a Spectrum design AlertBanner

The Spectrum CSS fieldgroup component

Web component implementation of a Spectrum design Breadcrumbs

The Spectrum CSS contextualhelp component

The Spectrum CSS badge component

Web component implementation of a Spectrum design ColorField

Web component implementation of a Spectrum design Truncated

The Spectrum CSS close button component

The Spectrum CSS coachmark component

The Spectrum CSS well component

The Spectrum CSS asset component

The Spectrum CSS assetlist component

The Spectrum CSS alertbanner component

The Spectrum CSS Color slider component

The Spectrum CSS Color Handle component

The Spectrum CSS tray component

The Spectrum CSS actionbar component

The Spectrum CSS clearbutton component

The Spectrum CSS Color Loupe component

The Spectrum CSS picker button component

The Spectrum CSS thumbnail component

The Spectrum CSS helptext component

The Spectrum CSS combobox component

The Spectrum CSS asset card component

The Spectrum CSS Coach Indicator component

The Spectrum CSS Color Area component

The Spectrum CSS steplist component

The Spectrum CSS Color Area component

The Spectrum CSS tag group component

The Spectrum CSS splitview component

The Spectrum CSS meter component

The Spectrum CSS Color swatch component

A Spectrum CSS preview

The Spectrum CSS infield button component

The Spectrum CSS dial component

A demo-ready bundle of the components in the Spectrum CSS library.

The Spectrum CSS datepicker component

The Spectrum CSS logicbutton component

The Spectrum CSS alertdialog component

The Spectrum CSS Color swatch group component

The Spectrum CSS opacitycheckerboard component

The Spectrum CSS miller component

The Spectrum CSS rating component

The Spectrum CSS floatingactionbutton component

The Spectrum CSS dropindicator component

The Spectrum CSS form component

Common mixins for Spectrum CSS components

The Spectrum CSS actionmenu component

The Spectrum CSS infieldprogresscircle component

A changelog entry generator for GitHub that links to commits, PRs and users

React wrapper for spectrum ui icons

React wrapper for spectrum workflow icons

UI Components for Vue based on Adobe Spectrum