JSPM

vaadin-dialog

vaadin-time-picker

vaadin-item

vaadin-list-box

Collection of 600+ unique icons designed for web applications

vaadin-email-field

vaadin-progress-bar

Useful for sharing information across a DOM tree

Web component providing a date selection field with scrollable month calendar

vaadin-multi-select-combo-box

Provide flexbox-based layouts

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

vaadin-scroller

vaadin-checkbox-group

vaadin-button

vaadin-menu-bar

Web Component for uploading files with drag and drop support

vaadin-avatar

vaadin-password-field

vaadin-accordion

A behavior that enables keybindings for greater a11y.

vaadin-date-time-picker

vaadin-login

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

vaadin-custom-field

vaadin-tabs

vaadin-message-input

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

vaadin-avatar-group

vaadin-text-area

Manages a set of svg icons

vaadin-horizontal-layout

vaadin-select

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.

vaadin-radio-group

vaadin-notification

vaadin-details

An element that supports displaying an icon

Web component providing configurable responsive layout for form elements

Web Component for creating tooltips

vaadin-field-highlighter

vaadin-confirm-dialog

vaadin-app-layout

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

vaadin-integer-field

vaadin-vertical-layout

vaadin-number-field

Web component for partitioning a layout into resizeable areas

Coordinates the flow of resizeable elements

vaadin-tabsheet

polymer-legacy-adapter

vaadin-messages

A singleton element that simplifies announcing text to screen readers.

A web framework for building virtual reality experiences.

vaadin-crud

Scoped CustomElementRegistry Polyfill

Bundles of components and dependencies

vaadin-rich-text-editor

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

vaadin-charts

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

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

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

Provides a behavior for making an element an overlay

vaadin-side-nav

vaadin-popover

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

Fits an element inside another element

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

vaadin-map

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

vaadin-cookie-consent

Adds a material design ripple to any container

Provides a behavior for an element that validates user input

vaadin-grid-pro

Web components for creating Visual Studio Code extensions

Common behaviors across the paper elements

Allows to define a scroller target

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

vaadin-card

Lets you bind to a CSS media query

Core functionality that is shared across all Lion Web Components

Vue.js 2.0 directive to detect element resize

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

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.

A textarea element that automatically grows with input

A material-design styled list item

A web component for Google Drive Picker

Manages a set of elements that can be selected

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

Makes it easy to make ajax calls and parse the response

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.

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 system for animating Polymer-based web components

Material design text fields

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

An unstyled element that works similarly to a native browser select

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

A material design icon button

vaadin-dashboard

Ninja Keys

PatternFly Elements

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

An input element with data binding

vaadin-overlay

A set of icons for use with iron-icon

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

vaadin-text-field

Displays a virtual, 'infinite' scrolling list of items

Provides accessible menu behavior

Import CSS files as css tagged-template literals

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:

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

Material design button

Web component providing a date selection field with scrollable month calendar

Bidirectional data binding into the page's URL.

Implements an accessible material design listbox

A simple element to fixture DOM for tests

vaadin-button

Web Component for displaying a list of items with filtering

vaadin-item

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

A material design progress bar

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

ReactiveControllers for powering common UI patterns

An element that works similarly to a native browser select

`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

ArcGIS Map Components

vaadin-list-mixin

Ninja Keys

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

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

Essential JS 2 TreeMap Components

vaadin-date-time-picker

vaadin-markdown

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

Web component providing configurable responsive layout for form elements

vaadin-element-mixin

Essential JS 2 LinearGauge Components

vaadin-accordion

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

Web Component for uploading files with drag and drop support

Provides a behavior for something with a minimum and maximum value

Web component implementation of a Spectrum design ClearButton

vaadin-menu-bar

vaadin-control-state-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.

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

A Material Design dialog

vaadin-time-picker

vaadin-radio-button

Element wrapper for the marked library

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

A material design notification toast

vaadin-list-box

vaadin-progress-bar

Web component implementation of a Spectrum design CloseButton

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 image-displaying element with lots of convenient features

vaadin-checkbox

Default configuration for working with rollup

vaadin-notification

vaadin-select

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

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

A material design checkbox

vaadin-custom-field

Material design tabs

Collection of 600+ unique icons designed for web applications

A material design toggle button control

Shadow DOM polyfill

vaadin-ordered-layout

Prism.js import and syntax highlighting

Provides a collapsable container

Organizes a set of pages and shows one at a time

A material design spinner

vaadin-tabs

A material design-style slider

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

Implements a behavior used for material design dialogs

Material design tooltip popup for content

Import CSS files as tagged template literals

vaadin-details

vaadin-messages

vaadin-login

Material design piece of paper with unique related data

vaadin-app-layout

Web component for partitioning a layout into resizeable areas

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

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

Material design status message for elements

A scrollable area used inside the material design dialog

Implements a input validator

Utility classes to help make testing easier

A material design radio button

A simple shim for the server-side DOM API

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

vaadin-avatar

Utility classes to make building demo pages easier

Wrapper around native form that submits native and custom elements

Tools for integrating web components/custom elements into JetBrains IDEs

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

A group of material design radio buttons

Helpers and utilities used by the API Viewer

Tabs web component used by the API Viewer

Hooks for web components

Base class for PatternFly Elements

A material design floating action button

Tabs for PatternFly Elements

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

Icon element for PatternFly Elements

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

vaadin-grid-pro

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

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

Avatar for PatternFly Elements

vaadin-confirm-dialog

Progress element for PatternFly Elements

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

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

Clipboard element for PatternFly Elements

Web component implementation of a Spectrum design Tray

Tools for integrating web components/custom elements into VS Code

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

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

vaadin-crud

A set of React components that wrap ArcGIS map components

Web component implementation of a Spectrum design HelpText

`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-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-link>` allow users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.

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

vaadin-charts

vaadin-rich-text-editor

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

A material design toolbar that is easily customizable

vaadin-cookie-consent

HTML5 Mobile Framework & UI Components

Web component for creating SVG icons

Minimal Design, a set of components for Angular

Use Svelte components anywhere

API documentation viewer for Web Components