JSPM

vaadin-text-area

vaadin-vertical-layout

Scoped CustomElementRegistry Polyfill

Web component providing configurable responsive layout for form elements

vaadin-avatar

vaadin-time-picker

vaadin-tabs

vaadin-card

vaadin-confirm-dialog

Web component for partitioning a layout into resizeable areas

vaadin-popover

vaadin-list-box

vaadin-accordion

The `@spectrum-web-components/shared` package provides essential base classes, mixins, and utilities that support developing Spectrum Web Components. This package contains foundational tools for focus management, slot observation, accessibility enhancemen

A web framework for building virtual reality experiences.

vaadin-login

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

vaadin-messages

`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a

Collection of 600+ unique icons designed for web applications

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

vaadin-dialog

vaadin-app-layout

vaadin-field-highlighter

vaadin-side-nav

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

vaadin-email-field

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

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library implementing Adobe's Spectrum design system. This package defines the CSS custom properties that implement design tokens from [Spectrum Tok

vaadin-progress-bar

A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server.

vaadin-message-input

vaadin-avatar-group

Useful for sharing information across a DOM tree

vaadin-tabsheet

ej2-drawings

vaadin-scroller

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

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

vaadin-markdown

Manages a set of svg icons

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

A behavior that enables keybindings for greater a11y.

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

An element that supports displaying an icon

Coordinates the flow of resizeable elements

Feature-rich JavaScript PDF library with built-in support for loading and manipulating PDF document.

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.

Adds a material design ripple to any container

Small and powerful client-side router for Web Components. Framework-agnostic.

Web component implementation of a Spectrum design ClearButton

Web component implementation of a Spectrum design CloseButton

ReactiveControllers for powering common UI patterns

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

polymer-legacy-adapter

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

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

`<sp-theme>` provides Spectrum design tokens (CSS custom properties) to everything in its DOM scope. Components inside a theme use these tokens to render correctly. The element itself does not visually “apply” styles to your app; it exposes the tokens so

vaadin-charts

Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.

vaadin-dashboard

Bundles of components and dependencies

Provides a behavior for making an element an overlay

Fits an element inside another element

Web component to create flexible responsive layouts and build nice looking dashboard.

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.

Enables a custom element to be included in an iron-form

vaadin-rich-text-editor

Core functionality that is shared across all Lion Web Components

vaadin-map

vaadin-grid-pro

A singleton element that simplifies announcing text to screen readers.

Implements an element that has a checked attribute and can be added to a form

Provides a behavior for an element that validates user input

Common behaviors across the paper elements

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

Lets you bind to a CSS media query

Ninja Keys

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

ArcGIS Map Components

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

vaadin-crud

A common package of Essential JS 2 base Vue libraries, methods and class definitions

Allows to define a scroller target

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

Web components for creating Visual Studio Code extensions

Barcode generator component is a pure JavaScript library which will convert a string to Barcode and show it to the user. This supports major 1D and 2D barcodes including coda bar, code 128, QR Code.

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

vaadin-cookie-consent

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

Essential JS 2 TreeMap Components

An input element with data binding

vaadin-list-mixin

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

A textarea element that automatically grows with input

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

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

Helpers designed to make integrating Web Components with Storybook easier.

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

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

A material design icon button

Import CSS files as css tagged-template literals

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

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.

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

Ninja Keys

`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

Material design text fields

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.

Manages a set of elements that can be selected

vaadin-text-field

Makes it easy to make ajax calls and parse the response

Web component implementation of a Spectrum design Tray

The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options

vaadin-overlay

A simple element to fixture DOM for tests

Provides accessible menu behavior

Web component implementation of a Spectrum design HelpText

Web component providing a date selection field with scrollable month calendar

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

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

Tools for integrating web components/custom elements into JetBrains IDEs

vaadin-element-mixin

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

vaadin-item

Web component implementation of a Spectrum design AlertDialog

Displays a virtual, 'infinite' scrolling list of items

The `<sp-search>` element is used for searching and filtering items.

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

A system for animating Polymer-based web components

Aura is a theme used by Vaadin components

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

Essential JS 2 LinearGauge Components

vaadin-checkbox

vaadin-button

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

Web Component for displaying a list of items with filtering

`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

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-

vaadin-custom-field

Tools for integrating web components/custom elements into VS Code

An unstyled element that works similarly to a native browser select

Implements an accessible material design listbox

vaadin-details

vaadin-control-state-mixin

Material design button

A material design element that composes a trigger and a dropdown menu

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

Provides a behavior for something with a minimum and maximum value

Web component implementation of a Spectrum design NumberField

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

Vue.js 2.0 directive to detect element resize

A material design progress bar

Web Component for uploading files with drag and drop support

vaadin-accordion

A material-design styled list item

A material design notification toast

An element that works similarly to a native browser select

Web component implementation of a Spectrum design InfieldButton

A set of icons for use with iron-icon

vaadin-dialog

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

vaadin-badge

Default configuration for working with rollup

Web component providing configurable responsive layout for form elements

A simple shim for the server-side DOM API

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

Web component for partitioning a layout into resizeable areas

vaadin-slider

vaadin-radio-button

AI-Driven Full-Stack Code Fabrication Engine

vaadin-login

Import CSS files as tagged template literals

Bidirectional data binding into the page's URL.

vaadin-progress-bar

vaadin-notification

vaadin-tabs

The `opacity-checkerboard` class provides a CSS utility that displays a checkerboard pattern background, commonly used to highlight transparent or semi-transparent areas in UI components. This visual indicator helps users distinguish between transparent a

vaadin-ordered-layout

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

vaadin-list-box

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 drop zone might be used in an upload workflow to enable the user to drop a file from their operating system into the drop zone,

vaadin-select

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

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

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

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

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

Abstract base classes for Spectrum Web Components

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.

vaadin-menu-bar

vaadin-time-picker

vaadin-date-time-picker

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

vaadin-app-layout

An `<sp-illustrated-message>` displays an outline illustration and a message, usually in an empty state or on an error page. It is also used inside a [DropZone](/components/dropzone).

Implements a behavior used for material design dialogs

Organizes a set of pages and shows one at a time

ArcGIS Maps SDK for JavaScript common components

Material design tooltip popup for content

Web component implementation of a Spectrum design Tags

Shadow DOM polyfill

Web component implementation of a Spectrum design ColorField

Provides a collapsable container

Web component implementation of a Spectrum design Badge

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.

A material design-style slider

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 to create comprehensive color selection interfaces.

The `<sp-color-handle>` is used to select a color on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It provides a draggable control point for precise color selection within color components.

Collection of 600+ unique icons designed for web applications

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 JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture

A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay

Material design tabs

Web component implementation of a Spectrum design Breadcrumbs

A material design checkbox

An `<sp-avatar>` is a thumbnail representation of an entity, such as a user or an organization. Avatars can have a defined image, which is usually uploaded by a user.

Web component implementation of a Spectrum design AlertBanner

An image-displaying element with lots of convenient features

Hooks for web components

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

A package of extendable web components

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

An `<sp-progress-bar>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress bars have a blue fill that shows the progress.

React wrapper for Infineon Design System Web Components

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

A material design spinner

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

A Code Playground That Just Works!

A scrollable area used inside the material design dialog

Web Component adapter for Univer UI services.

A Material Design dialog

Web component implementation of a Spectrum design Swatch

Material design piece of paper with unique related data

Web component implementation of a Spectrum design Grid

Infineon Design System - Web Components

A group of material design radio buttons

Prism.js import and syntax highlighting

Helpers and utilities used by the API Viewer

HTML5 Mobile Framework & UI Components

A material design radio button

Vertical Insure Web Components using Lit and Open Web Standards

Element wrapper for the marked library

Wrapper around native form that submits native and custom elements

A set of React components that wrap ArcGIS map components

A material design toggle button control

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

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