JSPM

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

Import CSS files as tagged template literals

vaadin-details

Element wrapper for the marked library

Default configuration for working with rollup

Material design piece of paper with unique related data

vaadin-dialog

vaadin-login

vaadin-messages

vaadin-app-layout

Web component for partitioning a layout into resizeable areas

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

Prism.js import and syntax highlighting

Material design status message for elements

Wrapper around native form that submits native and custom elements

A scrollable area used inside the material design dialog

A group of material design radio buttons

Implements a input validator

A material design radio button

Utility classes to help make testing easier

Tools for integrating web components/custom elements into JetBrains IDEs

Ninja Keys

vaadin-avatar

Autocomplete element for PatternFly Elements

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

A simple shim for the server-side DOM API

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

A material design floating action button

Progress element for PatternFly Elements

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

Tabs for PatternFly Elements

Button element for PatternFly Elements

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

Sass variables and mixins for PatternFly Elements

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

Utility classes to make building demo pages easier

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

Avatar for PatternFly Elements

vaadin-grid-pro

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

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

Web component implementation of a Spectrum design Tray

vaadin-confirm-dialog

Helpers and utilities used by the API Viewer

Tabs web component used by the API Viewer

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

Web component implementation of a Spectrum design HelpText

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

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

`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

Tools for integrating web components/custom elements into VS Code

A material design toolbar that is easily customizable

vaadin-crud

Web component implementation of a Spectrum design NumberField

Crayons for Developer Platform

HTML5 Mobile Framework & UI Components

vaadin-charts

Minimal Design, a set of components for Angular

vaadin-rich-text-editor

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

Helpers designed to make integrating Web Components with Storybook easier.

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

vaadin-cookie-consent

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

Use Svelte components anywhere

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.

A package of extendable web components

Web component implementation of a Spectrum design InfieldButton

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.

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

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

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.

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

A behavior to help with internationalizating apps

Web component for creating SVG icons

API documentation viewer for Web Components

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

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

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

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

Primary detail element for PatternFly Elements

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

Modal element for PatternFly Elements

A validating input for a credit card expiration date

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.

Comments web component made for Red Hat Customer Portal

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

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

Codeblock element for PatternFly Elements

Vue.js 2.0 directive to detect image loading

Cards for PatternFly Elements

Dropdown element for PatternFly Elements

A credit card input field

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

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

Cp 404 element for PatternFly Elements

Toast element for PatternFly Elements

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.

Number formatting for PatternFly Elements

Badge element for PatternFly Elements

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

Collapse element for PatternFly Elements

A responsive drawer panel

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.

A header and content wrapper for layout with headers

Mobile web UI based on Vue and WeUI

A validating input for a phone number

Provides an input field for a credit card cvc number

Web component implementation of a Spectrum design AlertDialog

Web component implementation of a Spectrum design Badge

Helper classes for PatternFly Elements

Navigation element for PatternFly Elements

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

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

Icon panel for PatternFly Elements

Readtime element for PatternFly Elements

Site switcher element for cpelements

Plcc table element for PatternFly Elements

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

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

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

Navigation account element for PatternFly Elements

Web component implementation of a Spectrum design Tags

Band container for PatternFly Elements

Represents a set of icons

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.

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

An input field for a zip code

Navigation element for PatternFly Elements

Progress stepper element for PatternFly Elements

Single File Web Components

Cp search autocomplete element for PatternFly Elements

Jump links element for PatternFly Elements

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

Elements for rendering Polymer component documentation.

Seamless integration of Twind with Web Components

Plcc table element for PatternFly Elements

Web component implementation of a Spectrum design Table

Turns a raw element definition into beautiful documentation

Cp table element for PatternFly Elements

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

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

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

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

Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.

WebC support for Eleventy adds for Single File Web Components

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

Web component implementation of a Spectrum design Swatch

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

Web component implementation of a Spectrum design Grid

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

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

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

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

An `<sp-color-wheel>` lets users visually change an individual channel of a color on a circular track.

An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. `sp-thumbnail` elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such

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

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

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

Web component implementation of a Spectrum design PickerButton

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

Overlays System using lit-html for rendering

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

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.

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 Stencil compiler integration for Storybook.

arc-overlay-mixin is a port of iron-overlay-behavior that works with web components

A set of React components that wrap ArcGIS coding components

Encapsulates Google Charts into a web component

A collection of Oxford Nanopore corporate / digital webcomponents

An `<sp-meter>` is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions.

Live demo playground for Web Components

lit-datepicker provides a simple datepicker with range.

API documentation and live playground for Web Components

A basic element implementation of iron-a11y-keys-behavior, matching the legacy core-a11y-keys.

arc-resizable-mixin is a port of iron-fit-behavior that works with web components

arc-fit-mixin is a port of iron-fit-behavior that works with web components

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

Web component implementation of a Spectrum design ContextualHelp

`@spectrum-web-components/bundle` is a master dependency that allows a project to import any and all of the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages collect

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

React wrapper components for seo-select - A customizable and accessible select component with search functionality

A customizable and accessible select component with search functionality built with Lit

A set of React components that wrap ArcGIS charts components

A button that is easily styleable and accessible in all contexts

Allows to groups multiple input fields or other fieldsets together

A set of localized messages for default Validators

Vaadin Elements is an evolving set of open source custom HTML elements for building mobile and desktop web applications in modern browsers.

Show relative overlay content on click, as a webcomponent

Vanilla JS DAppKit

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

Declarative client-side inclusion for the web using Custom Elements

Vaadin Component Factory Popup for Polymer 3

Types for integrating custom elements into Vue.js projects

Ionic integration for Nuxt

I've shared this across many projects. I like it *shrug*

Vue.js 3.0 directive to detect element resize

It enhances the functionality of the native `form` component. It is designed to interact with (instances of) form fields

Polymer element providing pdf viewer

It enhances the functionality of the native `<input>` element

A powerful, modern, and lightweight runtime for creating reactive web components with TypeScript

Provide a set of options where you can select one

Provide a way for users to write text that is multiple lines long

Lit web component + typed React adapter

Web component implementation of a Spectrum design Combobox

A baseline UI as Mixins, Custom Elements, React Components, etc.

Breaks a single goal down into dependable sub-tasks.

Element wrapper of `.innerHTML` for data binding with HTML elements.

A container for multiple checkboxes

Web component implementation of a Spectrum design AlertBanner

Manage a group of choices

A color picker element using all the Material Design colours

Web Component providing an easy way to display tooltips for any html element.

ArcGIS command line tool to create new web GIS projects and applications

A collection of reusable mixins + helpers for working with form associated custom elements.

A variety of simple components that match an aria-role


Helpers designed to make integrating Web Components with Storybook easier.

Polymer element providing a date range selection field with scrollable month calendar

HTML Imports polyfill

Accessible dropdown menu for Anypoint platform

Port of iron-selector that works with ES6 classes. Manages a list of elements that can be selected.

Web component implementation of a Spectrum design Breadcrumbs

Anypoint styled button.

A version of the `<label>` element that works with custom elements as well as native elements

A mixin to implement user input validation in a LitElement component

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 responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.

Provide a way for users to fill in an amount

vue isotope for directive

Anypoint list item

Web component implementation of a Spectrum design ColorField

A set of elements that perform oauth authorization

A multi/single select component made in vue

Headers parser Polymer Mixin to be implemented to elements that needs to parse headers data