JSPM

vaadin-checkbox-group

vaadin-avatar

vaadin-progress-bar

vaadin-dialog

Collection of 600+ unique icons designed for web applications

vaadin-login

Web component providing a date selection field with scrollable month calendar

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

vaadin-email-field

vaadin-radio-group

Feature-rich document editor control with built-in support for context menu, options pane and dialogs.

vaadin-integer-field

vaadin-scroller

vaadin-confirm-dialog

vaadin-text-area

vaadin-vertical-layout

Web component for partitioning a layout into resizeable areas

vaadin-side-nav

A behavior that enables keybindings for greater a11y.

Web component providing configurable responsive layout for form elements

vaadin-date-time-picker

vaadin-messages

vaadin-tabs

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

vaadin-app-layout

vaadin-password-field

vaadin-tabsheet

vaadin-card

Scoped CustomElementRegistry Polyfill

A web framework for building virtual reality experiences.

vaadin-rich-text-editor

vaadin-field-highlighter

polymer-legacy-adapter

Bundles of components and dependencies

Jspreadsheet is a lightweight, vanilla javascript plugin to create amazing web-based interactive data grids with spreadsheet like controls compatible with Excel, Google Spreadsheets and any other spreadsheet software.

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

An element that supports displaying an icon

Manages a set of svg icons

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

A singleton element that simplifies announcing text to screen readers.

Coordinates the flow of resizeable elements

vaadin-charts

A web component for Google Drive Picker

vaadin-popover

Adds a material design ripple to any container

Provides a behavior for making an element an overlay

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

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

vaadin-crud

vaadin-grid-pro

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

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

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

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.

Allows to define a scroller target

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

vaadin-dashboard

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

vaadin-markdown

Fits an element inside another element

vaadin-map

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

Lets you bind to a CSS media query

vaadin-cookie-consent

Core functionality that is shared across all Lion Web Components

Common behaviors across the paper elements

Provides a behavior for an element that validates user input

vaadin-overlay

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 common package of Essential JS 2 base Vue libraries, methods and class definitions

An input element with data binding

A textarea element that automatically grows with input

vaadin-button

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

Web Component for displaying a list of items with filtering

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

Manages a set of elements that can be selected

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.

ArcGIS Map Components

vaadin-text-field

Material design text fields

A material design icon button

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 free, flexible and high-quality Web Component for showing large amounts of tabular data

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

vaadin-element-mixin

Displays a virtual, 'infinite' scrolling list of items

Provides accessible menu behavior

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

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

Essential JS 2 TreeMap Components

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

Web component providing a date selection field with scrollable month calendar

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

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

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

Makes it easy to make ajax calls and parse the response

`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

vaadin-checkbox

A material-design styled list item

vaadin-control-state-mixin

A system for animating Polymer-based web components

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

Implements an accessible material design listbox

vaadin-list-box

Shadow DOM polyfill

vaadin-item

Import CSS files as css tagged-template literals

vaadin-progress-bar

Web component implementation of a Spectrum design ClearButton

An unstyled element that works similarly to a native browser select

An element that works similarly to a native browser select

Material design button

Ninja Keys

vaadin-custom-field

ReactiveControllers for powering common UI patterns

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

Provides a behavior for something with a minimum and maximum value

Vue.js 2.0 directive to detect element resize

vaadin-details

A material design progress bar

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

vaadin-radio-button

Web Component for uploading files with drag and drop support

Ninja Keys

Essential JS 2 LinearGauge Components

A material design notification toast

vaadin-accordion

Web component providing configurable responsive layout for form elements

Web component for partitioning a layout into resizeable areas

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

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

A set of icons for use with iron-icon

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

vaadin-notification

vaadin-dialog

Web component implementation of a Spectrum design CloseButton

vaadin-date-time-picker

vaadin-time-picker

vaadin-ordered-layout

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.

Default configuration for working with rollup

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

vaadin-login

Implements a behavior used for material design dialogs

Bidirectional data binding into the page's URL.

Tools for integrating web components/custom elements into JetBrains IDEs

Material design tabs

Material design tooltip popup for content

vaadin-select

vaadin-app-layout

vaadin-tabs

Collection of 600+ unique icons designed for web applications

A material design checkbox

Provides a collapsable container

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

A Material Design dialog

Organizes a set of pages and shows one at a time

A material design-style slider

PatternFly Elements

A simple shim for the server-side DOM API

Helpers designed to make integrating Web Components with Storybook easier.

Tools for integrating web components/custom elements into VS Code

A material design spinner

Import CSS files as tagged template literals

A simple element to fixture DOM for tests

A material design toggle button control

A scrollable area used inside the material design dialog

A group of material design radio buttons

Material design piece of paper with unique related data

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

vaadin-avatar

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

A material design radio button

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

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

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

An image-displaying element with lots of convenient features

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

vaadin-messages

Wrapper around native form that submits native and custom elements

HTML5 Mobile Framework & UI Components

vaadin-confirm-dialog

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

A set of React components that wrap ArcGIS map components

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

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

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

Element wrapper for the marked library

A material design toolbar that is easily customizable

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

Web component implementation of a Spectrum design Tray

Prism.js import and syntax highlighting

vaadin-crud

Helpers and utilities used by the API Viewer

Tabs web component used by the API Viewer

`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 material design floating action button

vaadin-charts

vaadin-rich-text-editor

Implements a input validator

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

Web component implementation of a Spectrum design HelpText

Ninja Keys

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

vaadin-cookie-consent

A header and content wrapper for layout with headers

Hooks for web 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.

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

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

vaadin-grid-pro

Vue.js 2.0 directive to detect image loading

A package of extendable web components

Minimal Design, a set of components for Angular

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

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

Material design status message for elements

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

Web component implementation of a Spectrum design NumberField

Web component for creating SVG icons

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

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.

Crayons for Developer Platform

Elements for rendering Polymer component documentation.

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

Use Svelte components anywhere

A custom datepicker element based on Google's Material Design built from scratch with lit-element

A behavior to help with internationalizating apps

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

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

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

`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

Turns a raw element definition into beautiful documentation

A Stencil compiler integration for Storybook.

Web component implementation of a Spectrum design InfieldButton

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

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

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

Aura is a theme used by Vaadin components

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

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