Web Components Packages

An `<sp-link>` allow users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.

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.

Quickly create a new stencil component project: npm init stencil

Microsoft Graph Toolkit React wrapper class

`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

`<sp-toast>` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

Express and jsdom-powered server / CLI being used by the Bolt Design System for experimentally pre-rendering web components

An `<sp-banner>` is an additional label an existing component may have. Banners cannot be interacted with. Banners in Spectrum have three variations for different uses as well as the ability to place it overlaid in the top-right corner of a container.

WarpView Editor Elements

A web component to integrate Phaser Framework with Angular, React, Vue, etc

Simple, Fast, Reactive, Supervised Javascript controllers for custom html elements.

Ignite UI Dock Manager Web 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.

Next-gen Pattern Lab UI used by the Bolt Design System. Pattern Lab PHP and Pattern Lab Node-friendly!

Auro custom auro-icon element

`<sp-quick-actions>` allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient. Spectrum guidelines suggest a `<sp-quick-action>` element feature only text buttons

A Vue.js components lib

Aspenify Web Components

`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

An `<sp-underlay>` provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while