Found 4281 results for 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
Web component implementation of a Spectrum design CloseButton
vaadin-control-state-mixin
vaadin-progress-bar
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
A material design spinner
Collection of 600+ unique icons designed for web applications
Web Component for showing context dependent items for any element on the page
vaadin-custom-field
A material design toggle button control
Implements a behavior used for material design dialogs
Material design tabs
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.
Material design tooltip popup for content
Shadow DOM polyfill
Default configuration for working with rollup
A material design-style slider
Prism.js import and syntax highlighting
vaadin-select
vaadin-details
Provides a collapsable container
Organizes a set of pages and shows one at a time
vaadin-tabs
vaadin-app-layout
Web component for partitioning a layout into resizeable areas
Import CSS files as tagged template literals
Material design piece of paper with unique related data
vaadin-dialog
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
vaadin-login
vaadin-messages
Spline is a collaborative design platform for creating production-ready interactive experiences in multiple dimensions. © 2024 Spline, Inc.
Jspreadsheet is a lightweight, vanilla javascript data grid plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
Wrapper around native form that submits native and custom elements
Material design status message for elements
A scrollable area used inside the material design dialog
Implements a input validator
A group of material design radio buttons
vaadin-avatar
Utility classes to help make testing easier
Tools for integrating web components/custom elements into JetBrains IDEs
A material design radio button
A simple shim for the server-side DOM API
A material design floating action button
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
Autocomplete element for PatternFly Elements
Utility classes to make building demo pages easier
Triggers an event when nearing the beginning or end of a scrollable element
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
vaadin-confirm-dialog
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
Base class for PatternFly Elements
Avatar for PatternFly Elements
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
A material design container that looks like a lifted sheet of paper
Web component implementation of a Spectrum design Tray
A set of React components that wrap ArcGIS map components
Hooks for web components
vaadin-grid-pro
`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.
This element creates a call-to-action link for PatternFly Elements
Helpers and utilities used by the API Viewer
Clipboard element for PatternFly Elements
Tabs web component used by the API Viewer
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-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.
A material design toolbar that is easily customizable
Web component implementation of a Spectrum design HelpText
Tools for integrating web components/custom elements into VS Code
vaadin-crud
vaadin-charts
HTML5 Mobile Framework & UI Components
vaadin-rich-text-editor
Helpers designed to make integrating Web Components with Storybook easier.
`<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
Minimal Design, a set of components for Angular
Polymer element to create flexible responsive layouts and build nice looking dashboard.
vaadin-cookie-consent
`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.
`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
Storybook for web-components: View web components snippets in isolation with Hot Reloading.
Web component for creating SVG icons
Use Svelte components anywhere
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.
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
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.
API documentation viewer for Web Components
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.
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.
A credit card input field
`<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
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
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
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-
`<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.
Codeblock 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.
Page element for PatternFly Elements
The localization system helps to manage localization data split into locales and automate its loading
A header and content wrapper for layout with headers
Trendyol Baklava Design System
Primary detail element for PatternFly Elements
Cp 404 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
Cards for PatternFly Elements
Web component implementation of a Spectrum design AlertDialog
Dropdown 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.
Comments web component made for Red Hat Customer Portal
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.
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 range-slider, composed of paper-slider elements
Vertically stacked list of invokers that can be clicked to reveal or hide content associated with them.
Collapse element for PatternFly 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
Band container 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.
Represents a set of icons
Web component implementation of a Spectrum design Badge
`<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 responsive drawer panel
Accordion for PatternFly Elements
A validating input for a phone number
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.
Health index for PatternFly Elements
Provides an input field for a credit card cvc number
Single File Web Components
Plcc table element for PatternFly Elements
Readtime element for PatternFly Elements
Icon panel for PatternFly Elements
Web component implementation of a Spectrum design Tags
Helper classes for PatternFly Elements
Navigation account element for PatternFly Elements
Elements for rendering Polymer component documentation.
An input field for a zip code
Navigation element for PatternFly Elements
Site switcher element for cpelements
Plcc table element for PatternFly Elements
Cp table element for PatternFly Elements
A Material Design item with header and collapsible content (Polymer)
Progress stepper element for PatternFly Elements
Toast element for PatternFly Elements
Jump links 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
Turns a raw element definition into beautiful documentation
Add a Github corner to your project page, This GitHub corners for web component.
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
Mobile web UI based on Vue and WeUI
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components
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
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
Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.
Form-core contains all essential building blocks for creating form fields and fieldsets
Shogi board web components has functions for replaying, manipulating, and editing
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>`.
A set of tools for retrieving and transforming data from the Custom Elements Manifest
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
Web component implementation of a Spectrum design Grid
use querySelector syntax to search for nodes inside of (nested) shadow roots
Web component implementation of a Spectrum design PickerButton
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-wheel>` lets users visually change an individual channel of a color on a circular track.
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
API documentation and live playground for Web Components
A Stencil compiler integration for Storybook.
An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
arc-overlay-mixin is a port of iron-overlay-behavior that works with web components
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.
Encapsulates Google Charts into a web component
A set of React components that wrap ArcGIS coding components
arc-resizable-mixin is a port of iron-fit-behavior that works with web components
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.
arc-fit-mixin is a port of iron-fit-behavior that works with web components
Live demo playground for Web Components
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.
Vaadin components is an evolving set of free, open sourced custom HTML elements for building mobile and desktop web applications in modern browsers.
lit-datepicker provides a simple datepicker with range.
`@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 basic element implementation of iron-a11y-keys-behavior, matching the legacy core-a11y-keys.
A custom datepicker element based on Google's Material Design built from scratch with lit-element
Overlays System using lit-html for rendering
Vaadin components is an evolving set of open sourced custom HTML elements for building mobile and desktop web applications in modern browsers.
A customizable and accessible select component with search functionality built with Lit
A set of React components that wrap ArcGIS charts components
A collection of Oxford Nanopore corporate / digital webcomponents
Vaadin Component Factory Popup for Polymer 3
React wrapper components for seo-select - A customizable and accessible select component with search functionality
Types for integrating custom elements into Vue.js projects
Declarative client-side inclusion for the web using Custom Elements
Vanilla JS DAppKit
Web component implementation of a Spectrum design ContextualHelp
A set of localized messages for default Validators
Ionic integration for Nuxt
I've shared this across many projects. I like it *shrug*
Polymer element providing pdf viewer
A baseline UI as Mixins, Custom Elements, React Components, etc.
HTML Imports polyfill
Show relative overlay content on click, as a webcomponent
Lit web component + typed React adapter
Provide a set of options where you can select one
Allows to groups multiple input fields or other fieldsets together
Helpers designed to make integrating Web Components with Storybook easier.
A set of tools for retrieving and transforming data from the Custom Elements Manifest
Web Component providing an easy way to display tooltips for any html element.
Breaks a single goal down into dependable sub-tasks.
A color picker element using all the Material Design colours
It enhances the functionality of the native `<input>` element
ArcGIS command line tool to create new web GIS projects and applications
A button that is easily styleable and accessible in all contexts
Accessible dropdown menu for Anypoint platform
Port of iron-selector that works with ES6 classes. Manages a list of elements that can be selected.
A variety of simple components that match an aria-role
Vaadin Elements is an evolving set of open source custom HTML elements for building mobile and desktop web applications in modern browsers.
Provide a way for users to write text that is multiple lines long
A collection of reusable mixins + helpers for working with form associated custom elements.
A mixin to implement user input validation in a LitElement component
Anypoint styled button.