JSPM

Ninja Keys

An unstyled element that works similarly to a native browser select

Displays a virtual, 'infinite' scrolling list of items

The `SpectrumElement` base class as created by mixing `SpectrumMixin` onto `LitElement` adopts `dir` values from the `document` at connection time with a fallback to `lrt`. In a TypeScript context, it also enforces the presence of `this.shadowRoot` on ext

A material design icon button

An input element with data binding

Import CSS files as css tagged-template literals

vaadin-overlay

Deliver [Spectrum Workflow Icons](https://spectrum.adobe.com/page/icons/) as either:

Material design button

Extend either the `Iconset` or `IconsetSVG` exports of this package to supply your application with a custom icon set to power the use of `<sp-icon>` elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as `<sp-ico

Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:

Provides accessible menu behavior

A set of icons for use with iron-icon

Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue

Implements an accessible material design listbox

A material design progress bar

ReactiveControllers for powering common UI patterns

vaadin-button

vaadin-text-field

Web Component for displaying a list of items with filtering

Bidirectional data binding into the page's URL.

An element that works similarly to a native browser select

Ninja Keys

vaadin-list-mixin

Web component providing a date selection field with scrollable month calendar

Web component for building UIs with a master area and a detail area.

Shared mixins, tools, etc. that support developing Spectrum Web Components.

`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different s

A free, flexible and high-quality Web Component for showing large amounts of tabular data

A simple element to fixture DOM for tests

vaadin-item

ArcGIS Map Components

Essential JS 2 TreeMap Components

Essential JS 2 LinearGauge Components

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma

vaadin-markdown

vaadin-accordion

An `<sp-action-button>` represents an action a user can take.

Web component providing configurable responsive layout for form elements

vaadin-date-time-picker

Web Component for uploading files with drag and drop support

vaadin-radio-button

Web component implementation of a Spectrum design ClearButton

vaadin-element-mixin

A modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies.

A Material Design dialog

vaadin-time-picker

vaadin-menu-bar

Provides a behavior for something with a minimum and maximum value

vaadin-notification

An image-displaying element with lots of convenient features

vaadin-list-box

Atomico is a small library for the creation of interfaces based on web-components, only using functions and hooks.

An `<sp-progress-circle>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent both determinate and indeterminate progress, helping users understand the status of ongoing operations

Web component implementation of a Spectrum design CloseButton

A material design checkbox

Element wrapper for the marked library

vaadin-control-state-mixin

vaadin-ordered-layout

vaadin-progress-bar

Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue

Web Component for showing context dependent items for any element on the page

Collection of 600+ unique icons designed for web applications

vaadin-custom-field

A material design toggle button control

vaadin-checkbox

An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte

Implements a behavior used for material design dialogs

A material design notification toast

Material design tabs

Shadow DOM polyfill

Default configuration for working with rollup

A material design-style slider

Prism.js import and syntax highlighting

A material design spinner

vaadin-select

vaadin-details

Provides a collapsable container

Organizes a set of pages and shows one at a time

An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.

vaadin-tabs

Material design tooltip popup for content

vaadin-app-layout

Material design piece of paper with unique related data

Import CSS files as tagged template literals

Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue

vaadin-dialog

vaadin-messages

vaadin-login

Jspreadsheet is a lightweight, vanilla javascript data grid plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.

Web component for partitioning a layout into resizeable areas

Spline is a collaborative design platform for creating production-ready interactive experiences in multiple dimensions. © 2024 Spline, Inc.

Material design status message for elements

A scrollable area used inside the material design dialog

Implements a input validator

Wrapper around native form that submits native and custom elements

Utility classes to help make testing easier

A material design radio button

A simple shim for the server-side DOM API

A group of material design radio buttons

vaadin-avatar

An `<sp-field-label>` provides accessible labelling for form elements. Use the `for` attribute to outline the `id` of an element in the same DOM tree to which it should associate itself. Field labels give context to information that a user needs to input

Ninja Keys

Tools for integrating web components/custom elements into JetBrains IDEs

Utility classes to make building demo pages easier

Triggers an event when nearing the beginning or end of a scrollable element

Autocomplete element for PatternFly Elements

A material design floating action button

An `<sp-picker>` is an alternative to HTML's `<select>` element. Use [`<sp-menu-item>`](../menu-item) elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.

An `<sp-popover>` is used to display transient content (menus, options, additional actions etc.) and appears when clicking/tapping on a source (tools, buttons, etc.) It stands out via its visual style (stroke and drop shadow) and floats on top of the rest

Icon element for PatternFly Elements

Tabs for PatternFly Elements

Button element for PatternFly Elements

Sass variables and mixins for PatternFly Elements

An `<sp-menu>` is used for creating a menu list. The various elements inside a menu are given as [`<sp-menu-group>`](../menu-group), [`<sp-menu-item>`](../menu-item), or `<sp-menu-divider>`. Often a `<sp-menu>` element will appear in a [`<sp-popover>`](..

An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `<sp-action-menu>` element. By defa

Avatar for PatternFly Elements

Base class for PatternFly Elements

A material design container that looks like a lifted sheet of paper

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

Web component implementation of a Spectrum design Tray

Hooks for web components

This element creates a call-to-action link for PatternFly Elements

vaadin-grid-pro

Clipboard element for PatternFly Elements

Helpers and utilities used by the API Viewer

Tabs web component used by the API Viewer

vaadin-confirm-dialog

Progress element for PatternFly Elements

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.

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

A set of React components that wrap ArcGIS map components

`sp-action-group` delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. The `compact` attribute merges these buttons so that they are visually joined to clarify their relations

`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them.

Web component implementation of a Spectrum design HelpText

Tools for integrating web components/custom elements into VS Code

A material design toolbar that is easily customizable

vaadin-crud

HTML5 Mobile Framework & UI Components

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

Web component implementation of a Spectrum design NumberField

Polymer element to create flexible responsive layouts and build nice looking dashboard.

Minimal Design, a set of components for Angular

Helpers designed to make integrating Web Components with Storybook easier.

vaadin-charts

`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

Crayons for Developer Platform

vaadin-rich-text-editor

Web component for creating SVG icons

Storybook for web-components: View web components snippets in isolation with Hot Reloading.

Use Svelte components anywhere

vaadin-cookie-consent

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.

Vaadin components is an evolving set of free, open sourced custom HTML elements for building mobile and desktop web applications in modern browsers.

A JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture

`sp-divider` brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

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

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

The `<sp-search>` element delivers a single input field with a "reset" button as well as a mangifying glass icon with which to power search interactions.

Web component implementation of a Spectrum design InfieldButton

Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.

A behavior to help with internationalizating apps

`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

Web Component for displaying a virtual/infinite list of items.

API documentation viewer for Web Components

A package of extendable web components

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

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

A validating input for a credit card expiration date

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

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

Vue.js 2.0 directive to detect image loading

The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`. An `<sp-tab>` element is associated with a sibling `<sp-tab-panel>` element via their `value` attribute. When an `<sp-tab>` element is `selected`, the associated `<sp-tab-

A credit card input field

Modal element for PatternFly Elements

The localization system helps to manage localization data split into locales and automate its loading

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

Trendyol Baklava Design System

Codeblock element for PatternFly Elements

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.

Cards for PatternFly Elements

Primary detail element for PatternFly Elements

Cp 404 element for PatternFly Elements

Dropdown element for PatternFly Elements

Side navigation allows users to locate information and features within the UI. It can be used for either hierarchical or flat navigation, and gives the ability to group navigable items categorically. Side navigation is an opportunity to prioritize content

Comments web component made for Red Hat Customer Portal

An `<sp-status-light>` is a great way to convey semantic meaning, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text.

Page element for PatternFly Elements

A material design-style range-slider, composed of paper-slider elements

A header and content wrapper for layout with headers

Vertically stacked list of invokers that can be clicked to reveal or hide content associated with them.

Collapse element for PatternFly Elements

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.

Band container for PatternFly Elements

Represents a set of icons

Web component implementation of a Spectrum design AlertDialog

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

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.

Web component implementation of a Spectrum design Badge

A responsive drawer panel

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

Navigation element for PatternFly Elements

A validating input for a phone number

Provides an input field for a credit card cvc number

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.

Accordion for PatternFly Elements

Health index for PatternFly Elements

Single File Web Components

Plcc table element for PatternFly Elements

Readtime element for PatternFly Elements

Icon panel for PatternFly Elements

Helper classes for PatternFly Elements

An input field for a zip code

Site switcher element for cpelements

Navigation element for PatternFly Elements

Plcc table element for PatternFly Elements

A Material Design item with header and collapsible content (Polymer)

Toast element for PatternFly Elements

Number formatting for PatternFly Elements

Badge element for PatternFly Elements

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

Integrate markdown styles into web components, Markdown CSS styles will not be conflicted.

Web component implementation of a Spectrum design Table

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.

Add a Github corner to your project page, This GitHub corners for web component.

Turns a raw element definition into beautiful documentation

Web component implementation of a Spectrum design Tags

Navigation account element for PatternFly Elements

Elements for rendering Polymer component documentation.

This PatternFly Element dynamically hides and shows content; the style is determined by the available space.

Web component implementation of a Spectrum design Swatch

Cp search autocomplete element for PatternFly Elements

Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

Cp table element for PatternFly Elements

WebC support for Eleventy adds for Single File Web Components

Seamless integration of Twind with Web Components

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

Progress stepper element for PatternFly Elements

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

Jump links element for PatternFly Elements

Form-core contains all essential building blocks for creating form fields and fieldsets

Shogi board web components has functions for replaying, manipulating, and editing

A set of tools for retrieving and transforming data from the Custom Elements Manifest

Mobile web UI based on Vue and WeUI

Web component implementation of a Spectrum design Grid

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

use querySelector syntax to search for nodes inside of (nested) shadow roots