Find a custom element

A searchable catalog of standalone web components.

1061 components

<accordion-container> Levi McGranahan · Layout
A generic Custom Element wrapper that turns some headings and other content into an accordion

JS
0.8 kB

CSS
∅

Library
∅

accordion-container-element on npm Demo of accordion-container
<actor-typeahead> Jake Lazaroff · Forms
Progressively enhances an input into an autocomplete for ATProto (Bluesky) handles.

JS
1.8 kB

CSS
∅

Library
∅

actor-typeahead on npm
<admin-bar> Will Browar · Navigation
A framework- and CMS-agnostic admin bar web component.

JS
16.0 kB

CSS
1.0 kB

Library
∅

Popular
1 out of 5

admin-bar-component on npm admin-bar on GitHub Docs for admin-bar
<aeon-datepicker> Chris Haynes · Data
A date time picker web component

JS
5.2 kB

CSS
0.1 kB

Library
∅

Popular
1 out of 5

@lamplightdev/aeon on npm aeon-datepicker on GitHub Docs for aeon-datepicker
<altcha-widget> ALTCHA · Forms
Privacy-first CAPTCHA widget, compliant with global regulations (GDPR/HIPAA/CCPA/LGDP/DPDPA/PIPL) and WCAG accessible. No tracking, self-verifying.

JS
37.0 kB

CSS
7.0 kB

Library
∅

Popular
5 out of 5

altcha on npm altcha-widget on GitHub Docs for altcha-widget
<announcement-banner> Zach Leatherman · Feedback
A reusable announcement bar banner component.

JS
0.3 kB

CSS
0.1 kB

Library
∅

Popular
1 out of 5

@zachleat/announcement-banner on npm announcement-banner on GitHub Docs for announcement-banner Demo of announcement-banner
<api-viewer> Serhii Kulykov · Feedback
API documentation and live playground for Web Components

JS
52.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit api-viewer-element on npm api-viewer on GitHub Docs for api-viewer
<auto-check> GitHub · Forms
An input element that validates its value with a server endpoint.

JS
2.2 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/auto-check-element on npm auto-check on GitHub Docs for auto-check
<auto-complete> GitHub · Forms
Auto-complete input values from server results

JS
4.0 kB

CSS
∅

Library
∅

Popular
4 out of 5

@github/auto-complete-element on npm auto-complete on GitHub Docs for auto-complete
<autosize-textarea> Andrico Karoulla · Forms
!The autosize-textarea component in action

JS
0.4 kB

CSS
∅

Library
∅

autosize-textarea on npm
<baseline-status> WebDX Community Group · Data
Shows the Baseline status and browser support of a web feature.

JS
24.9 kB

CSS
∅

Library
∅

Popular
3 out of 5

Lit baseline-status on npm baseline-status on GitHub Docs for baseline-status
<bluesky-post> David Darnes · Content
A Web Component to display Bluesky posts and their metadata

JS
1.0 kB

CSS
∅

Library
∅

@daviddarnes/bluesky-post on npm bluesky-post on GitHub Docs for bluesky-post Demo of bluesky-post
<bluesky-replies> David Darnes · Content
A Web Component to display Bluesky post replies

JS
1.1 kB

CSS
∅

Library
∅

@daviddarnes/bluesky-replies on npm bluesky-replies on GitHub Docs for bluesky-replies Demo of bluesky-replies
<browser-support> OddBird · Content
A web component for showing browser-support data from the Web Features project

JS
6.5 kB

CSS
∅

Library
∅

@oddbird/browser-support on npm browser-support on GitHub Docs for browser-support Demo of browser-support
<browser-window> Zach Leatherman · Layout
Used in demos as a way to fake a Safari-esque web browser window.

JS
2.1 kB

CSS
∅

Library
∅

Popular
2 out of 5

@zachleat/browser-window on npm browser-window on GitHub Docs for browser-window Demo of browser-window
<bs-carousel> Boxslider · Media
BoxSlider Web components

JS
9.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

7mo @boxslider/components on npm bs-carousel on GitHub Docs for bs-carousel
<bs-cube> Boxslider · Media
BoxSlider Web components

JS
9.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

7mo @boxslider/components on npm bs-cube on GitHub Docs for bs-cube
<bs-fade> Boxslider · Media
BoxSlider Web components

JS
9.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

7mo @boxslider/components on npm bs-fade on GitHub Docs for bs-fade
<bs-i> LeKoala · Utilities
A custom element to call Bootstrap Icons

JS
0.4 kB

CSS
∅

Library
∅

5y bootstrap-icon-element on npm bs-i on GitHub Docs for bs-i
<bs-slider-controls> Boxslider · Forms
BoxSlider Web components

JS
9.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

7mo @boxslider/components on npm bs-slider-controls on GitHub Docs for bs-slider-controls
<bs-tile> Boxslider · Media
BoxSlider Web components

JS
9.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

7mo @boxslider/components on npm bs-tile on GitHub Docs for bs-tile
<bt-device> Matt Steele · Utilities
A small (900 byte) Custom Element to make Web Bluetooth a little easier to use.

JS
0.5 kB

CSS
∅

Library
∅

bt-device on npm
<calendar-date> Cally · Data
Calendar for selecting a single date.

JS
9.6 kB

CSS
∅

Library
∅

Popular
3 out of 5

cally on npm calendar-date on GitHub Docs for calendar-date
<calendar-month> Cally · Data
A month grid used inside Cally’s calendar components.

JS
9.6 kB

CSS
∅

Library
∅

Popular
3 out of 5

cally on npm calendar-month on GitHub Docs for calendar-month
<calendar-multi> Cally · Data
Calendar for selecting multiple dates.

JS
9.6 kB

CSS
∅

Library
∅

Popular
3 out of 5

cally on npm calendar-multi on GitHub Docs for calendar-multi
<calendar-range> Cally · Data
Calendar for selecting a range of dates.

JS
9.6 kB

CSS
∅

Library
∅

Popular
3 out of 5

cally on npm calendar-range on GitHub Docs for calendar-range
<calendar-select-month> Cally · Data
A month dropdown for navigating Cally’s calendars.

JS
9.6 kB

CSS
∅

Library
∅

Popular
3 out of 5

cally on npm calendar-select-month on GitHub Docs for calendar-select-month
<calendar-select-year> Cally · Data
A year dropdown for navigating Cally’s calendars.

JS
9.6 kB

CSS
∅

Library
∅

Popular
3 out of 5

cally on npm calendar-select-year on GitHub Docs for calendar-select-year
<calendar-view> LeKoala · Data
Framework-agnostic Temporal calendar and resource scheduler Web Component

JS
21.4 kB

CSS
7.3 kB

Library
∅

21d @lekoala/calendar on npm
<carou-scroll> Zach Leatherman · Layout
Add next/previous buttons to a horizontal scrollable container.

JS
1.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/carouscroll on npm carou-scroll on GitHub Docs for carou-scroll Demo of carou-scroll
<chess-board> Justin Fagnani · Content
A chessboard web component

JS
15.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

Lit chessboard-element on npm chess-board on GitHub Docs for chess-board
<click-spark> Ryan Mulligan · Effects
Adds a little spark effect to your clicks.

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

click-spark on npm click-spark on GitHub Docs for click-spark Demo of click-spark
<clipboard-copy> GitHub · Actions
Copy element text content or input values to the clipboard.

JS
1.1 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/clipboard-copy-element on npm clipboard-copy on GitHub Docs for clipboard-copy
<cm-editor> Justin Fagnani · Content
A CodeMirror code editor as a custom element.

JS
136.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

Lit codemirror-elements on npm cm-editor on GitHub Docs for cm-editor
<code-bubble> Burton Smith · Content
Shows code examples with links to open them in a StackBlitz sandbox.

JS
14.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

Lit code-bubble on npm code-bubble on GitHub Docs for code-bubble
<code-pen> David Darnes · Content
A Web Component to open code samples in CodePen

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

@daviddarnes/code-pen on npm code-pen on GitHub Docs for code-pen Demo of code-pen
<color-palette> Raymond Camden · Media
Shows the palette of prominent colors beneath an image, using Color Thief.

Docs for color-palette Demo of color-palette
<color-scheme-switch> André Ruffert · Forms
A custom element to toggle between a light and dark color scheme

JS
0.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

1mo color-scheme-switch-element on npm color-scheme-switch on GitHub Docs for color-scheme-switch Demo of color-scheme-switch
<combo-box> LeKoala · Forms
Native-first <combo-box> combobox/filterable-select

JS
14.6 kB

CSS
6.3 kB

Library
∅

Popular
2 out of 5

23d @lekoala/combobox on npm combo-box on GitHub Docs for combo-box
<compress-table> Raymond Camden · Data
Truncates a long table to its first rows with a control to show the rest.

Docs for compress-table Demo of compress-table
<content-warning> Aaron Gustafson · Content
A web component for block and inline content warnings.

JS
2.2 kB

CSS
∅

Library
∅

@aarongustafson/content-warning on npm content-warning on GitHub Docs for content-warning Demo of content-warning
<contrast-details> David Darnes · Layout
A Web Component to display the contrast ratio and level of two colours using CSS custom properties

JS
0.8 kB

CSS
∅

Library
∅

@daviddarnes/contrast-details on npm contrast-details on GitHub Docs for contrast-details Demo of contrast-details
<cross-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm cross-burger on GitHub Docs for cross-burger
<dark-mode-toggle> Thomas Steiner · Forms
Web Component that toggles dark mode 🌒

JS
2.8 kB

CSS
∅

Library
∅

Popular
2 out of 5

dark-mode-toggle on npm dark-mode-toggle on GitHub Docs for dark-mode-toggle Demo of dark-mode-toggle
<data-grid> LeKoala · Layout
Standalone data grid web component

JS
32.4 kB

CSS
12.4 kB

Library
∅

Popular
1 out of 5

4d data-grid-component on npm data-grid on GitHub Docs for data-grid Demo of data-grid
<data-table> Raymond Camden · Data
Renders a sortable, paginated table from a JSON API.

Docs for data-table Demo of data-table
<date-calendar> LeKoala · Data
Native-first date picker and inline calendar primitives

JS
0.3 kB

CSS
6.2 kB

Library
∅

Popular
2 out of 5

23d @lekoala/date-picker on npm date-calendar on GitHub Docs for date-calendar
<date-picker> LeKoala · Data
Native-first date picker and inline calendar primitives

JS
0.3 kB

CSS
6.2 kB

Library
∅

Popular
2 out of 5

23d @lekoala/date-picker on npm date-picker on GitHub Docs for date-picker
<deck-controls> Keith Cirkel · Utilities
On-screen playback controls for a <deck-shift> slide deck.

JS
2.8 kB

CSS
∅

Library
∅

11d deck-controls on npm
<deck-presenter> Keith Cirkel · Layout
A presenter window for a <deck-shift> slide deck: timer, current and next slide, and notes with cues.

JS
2.9 kB

CSS
∅

Library
∅

11d deck-presenter on npm
<deck-recorder> Keith Cirkel · Media
Records a <deck-shift> talk as a webcam video plus a timed Puppeteer Replay flow, and replays them into one video.

JS
2.6 kB

CSS
∅

Library
∅

11d deck-recorder on npm
<deck-shift> Keith Cirkel · Content
A slide deck custom element: HTML sections, steps, View Transitions and speaker notes.

JS
4.0 kB

CSS
∅

Library
∅

11d deck-shift on npm
<deep-chat> Ovidijus Parsiunas · Content
Customizable chat component for AI APIs

JS
122.8 kB

CSS
∅

Library
∅

Popular
3 out of 5

2y deep-chat on npm deep-chat on GitHub Docs for deep-chat
~~<details-dialog>~~ Archived GitHub · Overlays
A modal dialog opened with a <details> button.

JS
1.5 kB

CSS
0.1 kB

Library
∅

@github/details-dialog-element on npm details-dialog on GitHub Docs for details-dialog
<details-menu> GitHub · Overlays
A menu opened with a <details> button.

JS
1.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/details-menu-element on npm details-menu on GitHub Docs for details-menu
<details-utils> Zach Leatherman · Layout
A collection of utilities to progressively enhance <details> with new features

JS
1.8 kB

CSS
∅

Library
∅

Popular
2 out of 5

@zachleat/details-utils on npm details-utils on GitHub Docs for details-utils Demo of details-utils
<dia-calendar> Prerelease Burton Smith · Forms
The calendar grid from Dia Date Picker, usable on its own.

JS
15.4 kB

CSS
∅

Library
∅

Lit dia-date-picker on npm dia-calendar on GitHub Docs for dia-calendar
<dia-date-picker> Prerelease Burton Smith · Forms
An accessible date picker built with standards-based web components.

JS
15.4 kB

CSS
∅

Library
∅

Lit dia-date-picker on npm dia-date-picker on GitHub Docs for dia-date-picker
<dialog-image> Raymond Camden · Overlays
Opens a larger version of a thumbnail image in a native dialog.

Docs for dialog-image Demo of dialog-image
<dis-closure> Nathan Knowler · Layout
A disclosure custom element that’s friendly to heading elements.

JS
1.0 kB

CSS
∅

Library
∅

@knowler/disclosure-element on npm Docs for dis-closure
<duration-property> David Darnes · Media
A Web Component to surface an audio or video's duration as a CSS Custom Property

JS
0.3 kB

CSS
∅

Library
∅

@daviddarnes/duration-property on npm duration-property on GitHub Docs for duration-property Demo of duration-property
<dynamic-datalist> Aaron Gustafson · Forms
Web component that enables you to dynamically update a field’s `datalist` with values retrieved from a URL as the user types

JS
1.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

@aarongustafson/dynamic-datalist on npm dynamic-datalist on GitHub Docs for dynamic-datalist Demo of dynamic-datalist
<easy-row> compmeist · Layout
A CSS grid page layout utility.

easy-row on GitHub
<elena-button> Elena · Actions
Button component is used for interface actions.

JS
0.6 kB

CSS
1.1 kB

Library
3.6 kB

Popular
1 out of 5

Elena @elenajs/components on npm elena-button on GitHub Docs for elena-button
<elena-spinner> Elena · Feedback
Visually hidden hides the element visually while keeping it available for assistive technologies.

JS
0.1 kB

CSS
0.4 kB

Library
3.6 kB

Popular
1 out of 5

Elena @elenajs/components on npm elena-spinner on GitHub Docs for elena-spinner
<elena-stack> Elena · Layout
Stack component manages layout of immediate children with optional spacing between each child.

JS
0.2 kB

CSS
0.1 kB

Library
3.6 kB

Popular
1 out of 5

Elena @elenajs/components on npm elena-stack on GitHub Docs for elena-stack
<elena-visually-hidden> Elena · Utilities
Visually hidden hides the element visually while keeping it available for assistive technologies.

JS
0.1 kB

CSS
0.2 kB

Library
3.6 kB

Popular
1 out of 5

Elena @elenajs/components on npm elena-visually-hidden on GitHub Docs for elena-visually-hidden
<emoji-picker> Nolan Lawson · Media
Lightweight emoji picker distributed as a web component

JS
13.7 kB

CSS
∅

Library
∅

Popular
5 out of 5

emoji-picker-element on npm emoji-picker on GitHub Docs for emoji-picker Demo of emoji-picker
<extra-model> Google · Media
Easily display interactive 3D models on the web and in AR!

JS
310.9 kB

CSS
∅

Library
∅

Popular
4 out of 5

Lit @google/model-viewer on npm extra-model on GitHub Docs for extra-model
<fade-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm fade-burger on GitHub Docs for fade-burger
<feedback-component> Ramsey Solutions · Forms
A native web component for collecting quick user feedback.

JS
2.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

@ramseyinhouse/feedback-component on npm feedback-component on GitHub
<field-error> Nathan Knowler · Forms
A field error element for displaying custom error messages that are associated with form controls.

JS
0.7 kB

CSS
∅

Library
∅

@knowler/field-error-element on npm Docs for field-error
<file-attachment> GitHub · Forms
Attach files via drag and drop or file input.

JS
1.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

@github/file-attachment-element on npm file-attachment on GitHub Docs for file-attachment
<file-drop> Google Chrome Labs · Forms
File Drop Custom Element

JS
0.9 kB

CSS
∅

Library
∅

Popular
2 out of 5

file-drop-element on npm file-drop on GitHub Docs for file-drop
<file-preview> Raymond Camden · Forms
Shows a preview of the file a user selects in a file input.

file-preview on GitHub Docs for file-preview
<filter-> sakamies · Utilities
Filters a list of elements based on a form.

filter- on GitHub Demo of filter-
<filter-container> Zach Leatherman · Utilities
Filtering visible child elements based on form field values.

JS
1.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/filter-container on npm filter-container on GitHub Docs for filter-container Demo of filter-container
<filter-input> GitHub · Forms
Display elements in a subtree that match filter input text.

JS
1.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

@github/filter-input-element on npm filter-input on GitHub Docs for filter-input
<fit-vids> Dave Rupert · Media
Web Component version of FitVids from the maker of FitVids

JS
0.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

@davatron5000/fit-vids on npm fit-vids on GitHub Docs for fit-vids
<flex-grid> LeKoala · Layout
A powerful flex based grid system

JS
0.7 kB

CSS
1.8 kB

Library
∅

flex-grid-element on npm flex-grid on GitHub Docs for flex-grid
<fluent-accordion> Fluent UI · Layout
An Accordion Custom HTML Element Implements | ARIA Accordion.

JS
1.5 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-accordion on GitHub Docs for fluent-accordion
<fluent-accordion-item> Fluent UI · Layout
An Accordion Item Custom HTML Element. Based on BaseAccordionItem and includes style and layout specific attributes

JS
2.6 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-accordion-item on GitHub Docs for fluent-accordion-item
<fluent-anchor-button> Fluent UI · Navigation
An Anchor Custom HTML Element. Based on BaseAnchor and includes style and layout specific attributes

JS
3.5 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-anchor-button on GitHub Docs for fluent-anchor-button
<fluent-avatar> Fluent UI · Media
An Avatar Custom HTML Element. Based on BaseAvatar and includes style and layout specific attributes

JS
4.7 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-avatar on GitHub Docs for fluent-avatar
<fluent-badge> Fluent UI · Feedback
The base class used for constructing a fluent-badge custom element

JS
2.2 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-badge on GitHub Docs for fluent-badge
<fluent-button> Fluent UI · Actions
A Button Custom HTML Element. Based on BaseButton and includes style and layout specific attributes

JS
3.6 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-button on GitHub Docs for fluent-button
<fluent-checkbox> Fluent UI · Forms
A Checkbox Custom HTML Element. Implements the | ARIA checkbox .

JS
3.3 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-checkbox on GitHub Docs for fluent-checkbox
<fluent-compound-button> Fluent UI · Actions
The base class used for constructing a fluent-compound-button custom element

JS
4.0 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-compound-button on GitHub Docs for fluent-compound-button
<fluent-counter-badge> Fluent UI · Feedback
A CounterBadge Custom HTML Element. Based on BaseCounterBadge and includes style and layout specific attributes.

JS
2.3 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-counter-badge on GitHub Docs for fluent-counter-badge
<fluent-dialog> Fluent UI · Overlays
A Dialog Custom HTML Element.

JS
1.6 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-dialog on GitHub Docs for fluent-dialog
<fluent-dialog-body> Fluent UI · Overlays
Dialog Body component that extends the FASTElement class.

JS
1.2 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-dialog-body on GitHub Docs for fluent-dialog-body
<fluent-divider> Fluent UI · Layout
A Divider Custom HTML Element. Based on BaseDivider and includes style and layout specific attributes

JS
1.6 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-divider on GitHub Docs for fluent-divider
<fluent-drawer> Fluent UI · Overlays
A component that provides a drawer for displaying content in a side panel.

JS
1.9 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-drawer on GitHub Docs for fluent-drawer
<fluent-drawer-body> Fluent UI · Overlays
A component that provides a drawer body for displaying content in a side panel.

JS
1.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-drawer-body on GitHub Docs for fluent-drawer-body
<fluent-dropdown> Fluent UI · Overlays
The Fluent Dropdown Element. Implements @microsoft/fast-foundation#BaseDropdown.

JS
7.0 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-dropdown on GitHub Docs for fluent-dropdown
<fluent-dropdown-option> Fluent UI · Overlays
A DropdownOption Custom HTML Element. Implements the | ARIA option role.

JS
70.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-dropdown-option on GitHub Docs for fluent-dropdown-option
<fluent-field> Fluent UI · Forms
A Field Custom HTML Element. Based on BaseField and includes style and layout specific attributes

JS
2.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-field on GitHub Docs for fluent-field
<fluent-image> Fluent UI · Media
The base class used for constucting a fluent image custom element

JS
0.6 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-image on GitHub Docs for fluent-image
<fluent-label> Fluent UI · Forms
The base class used for constructing a fluent-label custom element

JS
0.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-label on GitHub Docs for fluent-label
<fluent-link> Fluent UI · Navigation
An Anchor Custom HTML Element. Based largely on the | <a> element .

JS
1.7 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-link on GitHub Docs for fluent-link
<fluent-listbox> Fluent UI · Content
A Listbox Custom HTML Element. Implements the | ARIA listbox role.

JS
2.3 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-listbox on GitHub Docs for fluent-listbox
<fluent-menu> Fluent UI · Navigation
The Menu component functions as a customizable menu element.

JS
3.2 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-menu on GitHub Docs for fluent-menu
<fluent-menu-button> Fluent UI · Navigation
The base class used for constructing a fluent-menu-button custom element

JS
3.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-menu-button on GitHub Docs for fluent-menu-button
<fluent-menu-item> Fluent UI · Navigation
A Switch Custom HTML Element.

JS
3.7 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-menu-item on GitHub Docs for fluent-menu-item
<fluent-menu-list> Fluent UI · Navigation
A MenuList Custom HTML Element. Implements the | ARIA menu .

JS
5.4 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-menu-list on GitHub Docs for fluent-menu-list
<fluent-message-bar> Fluent UI · Feedback
A Message Bar Custom HTML Element.

JS
1.2 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-message-bar on GitHub Docs for fluent-message-bar
<fluent-progress-bar> Fluent UI · Feedback
A Progress HTML Element. Based on BaseProgressBar and includes style and layout specific attributes

JS
1.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-progress-bar on GitHub Docs for fluent-progress-bar
<fluent-radio> Fluent UI · Forms
A Radio Custom HTML Element. Implements the | ARIA `radio` role.

JS
2.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-radio on GitHub Docs for fluent-radio
<fluent-radio-group> Fluent UI · Forms
A Radio Group Custom HTML Element. Implements the | ARIA `radiogroup` role.

JS
6.4 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-radio-group on GitHub Docs for fluent-radio-group
<fluent-rating-display> Fluent UI · Forms
A Rating Display Custom HTML Element. Based on BaseRatingDisplay and includes style and layout specific attributes

JS
2.7 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-rating-display on GitHub Docs for fluent-rating-display
<fluent-slider> Fluent UI · Forms
The base class used for constructing a fluent-slider custom element

JS
4.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-slider on GitHub Docs for fluent-slider
<fluent-spinner> Fluent UI · Feedback
A Spinner Custom HTML Element. Based on BaseSpinner and includes style and layout specific attributes

JS
1.2 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-spinner on GitHub Docs for fluent-spinner
<fluent-switch> Fluent UI · Forms
A Switch Custom HTML Element. Based on BaseCheckbox and includes style and layout specific attributes

JS
3.0 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-switch on GitHub Docs for fluent-switch
<fluent-tab> Fluent UI · Navigation
Tab extends the FASTTab and is a child of the TabList

JS
2.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-tab on GitHub Docs for fluent-tab
<fluent-tablist> Fluent UI · Navigation
A Tablist component.

JS
7.3 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-tablist on GitHub Docs for fluent-tablist
<fluent-text> Fluent UI · Content
The base class used for constructing a fluent-text custom element

JS
1.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-text on GitHub Docs for fluent-text
<fluent-text-area> Fluent UI · Content
The Fluent TextArea Element.

JS
70.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-text-area on GitHub Docs for fluent-text-area
<fluent-text-input> Fluent UI · Content
A Text Input Custom HTML Element. Based on BaseTextInput and includes style and layout specific attributes

JS
4.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-text-input on GitHub Docs for fluent-text-input
<fluent-toggle-button> Fluent UI · Forms
The base class used for constructing a `<fluent-toggle-button>` custom element.

JS
4.5 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-toggle-button on GitHub Docs for fluent-toggle-button
<fluent-tooltip> Fluent UI · Overlays
A Tooltip Custom HTML Element. Based on ARIA APG Tooltip Pattern.

JS
2.4 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-tooltip on GitHub Docs for fluent-tooltip
<fluent-tree> Fluent UI · Navigation
The Fluent Tree Element. Implements @microsoft/fast-foundation#BaseTree.

JS
5.1 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-tree on GitHub Docs for fluent-tree
<fluent-tree-item> Fluent UI · Navigation
The Fluent Tree Item Element. Implements @microsoft/fast-foundation#BaseTreeItem.

JS
2.8 kB

CSS
∅

Library
23.5 kB

Popular
3 out of 5

FAST @fluentui/web-components on npm fluent-tree-item on GitHub Docs for fluent-tree-item
<form-dropzone> Aaron Gustafson · Forms
Progressively enhances an associated label and file input with a Light DOM drag-and-drop surface, accessible announcements, and optional image previews.

JS
3.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

@aarongustafson/form-dropzone on npm form-dropzone on GitHub Docs for form-dropzone Demo of form-dropzone
<form-matching-fields> Aaron Gustafson · Forms
Web component that automatically adds validation rules that ensure the values of descendent fields match.

JS
1.7 kB

CSS
∅

Library
∅

@aarongustafson/form-matching-fields on npm form-matching-fields on GitHub Docs for form-matching-fields Demo of form-matching-fields
<form-obfuscator> Aaron Gustafson · Forms
Web component that obfuscates fields when they don’t have focus.

JS
1.5 kB

CSS
∅

Library
∅

@aarongustafson/form-obfuscator on npm form-obfuscator on GitHub Docs for form-obfuscator Demo of form-obfuscator
<form-repeatable> Aaron Gustafson · Forms
A web component that enables you to control the duplication of fields.

JS
3.0 kB

CSS
∅

Library
∅

@aarongustafson/form-repeatable on npm form-repeatable on GitHub Docs for form-repeatable Demo of form-repeatable
<form-required-checkboxes> Aaron Gustafson · Forms
Web component that enables requirement rules for checkbox groups.

JS
3.4 kB

CSS
∅

Library
∅

@aarongustafson/form-required-checkboxes on npm form-required-checkboxes on GitHub Docs for form-required-checkboxes Demo of form-required-checkboxes
<form-required-if> Aaron Gustafson · Forms
Web component that enables fields to be required based on the value(s) of other fields.

JS
1.9 kB

CSS
∅

Library
∅

@aarongustafson/form-required-if on npm form-required-if on GitHub Docs for form-required-if Demo of form-required-if
<form-saver> Aaron Gustafson · Forms
A web component that stores (and restores) values within the first form it contains.

JS
2.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

@aarongustafson/form-saver on npm form-saver on GitHub Docs for form-saver Demo of form-saver
<form-show-if> Aaron Gustafson · Forms
Web component that enables you to make one HTML form field show (or not) based on the value(s) of another field.

JS
1.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

@aarongustafson/form-show-if on npm form-show-if on GitHub Docs for form-show-if Demo of form-show-if
<form-validation-list> Aaron Gustafson · Forms
A web component comprising a list of validation rules for a field.

JS
3.8 kB

CSS
∅

Library
∅

@aarongustafson/form-validation-list on npm form-validation-list on GitHub Docs for form-validation-list Demo of form-validation-list
<fullscreen-control> Aaron Gustafson · Media
A web component to progressively enhance any video or iframe element to have fullscreen capabilities.

JS
2.9 kB

CSS
∅

Library
∅

@aarongustafson/fullscreen-control on npm fullscreen-control on GitHub Docs for fullscreen-control Demo of fullscreen-control
<fundraising-status> Zach Leatherman · Data
Web component to show the current status of a fundraiser.

JS
0.9 kB

CSS
∅

Library
∅

@zachleat/fundraising-status on npm fundraising-status on GitHub
<g-emoji> GitHub · Media
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.

JS
1.8 kB

CSS
∅

Library
∅

Popular
2 out of 5

@github/g-emoji-element on npm g-emoji on GitHub Docs for g-emoji
<gmpx-api-loader> Extended Component Library · Feedback
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
0.1 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-api-loader on GitHub Docs for gmpx-api-loader
<gmpx-icon-button> Extended Component Library · Media
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
2.9 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-icon-button on GitHub Docs for gmpx-icon-button
<gmpx-overlay-layout> Extended Component Library · Overlays
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
2.1 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-overlay-layout on GitHub Docs for gmpx-overlay-layout
<gmpx-place-attribution> Extended Component Library · Content
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
4.4 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-attribution on GitHub Docs for gmpx-place-attribution
<gmpx-place-data-provider> Extended Component Library · Utilities
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
6.4 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-data-provider on GitHub Docs for gmpx-place-data-provider
<gmpx-place-directions-button> Extended Component Library · Actions
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
7.0 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-directions-button on GitHub Docs for gmpx-place-directions-button
<gmpx-place-field-boolean> Extended Component Library · Forms
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
5.1 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-field-boolean on GitHub Docs for gmpx-place-field-boolean
<gmpx-place-field-link> Extended Component Library · Forms
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
4.7 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-field-link on GitHub Docs for gmpx-place-field-link
<gmpx-place-field-text> Extended Component Library · Forms
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
6.1 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-field-text on GitHub Docs for gmpx-place-field-text
<gmpx-place-opening-hours> Extended Component Library · Content
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
8.9 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-opening-hours on GitHub Docs for gmpx-place-opening-hours
<gmpx-place-overview> Extended Component Library · Content
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
19.8 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-overview on GitHub Docs for gmpx-place-overview
<gmpx-place-photo-gallery> Extended Component Library · Media
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
8.6 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-photo-gallery on GitHub Docs for gmpx-place-photo-gallery
<gmpx-place-picker> Extended Component Library · Forms
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
6.9 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-picker on GitHub Docs for gmpx-place-picker
<gmpx-place-price-level> Extended Component Library · Data
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
4.3 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-price-level on GitHub Docs for gmpx-place-price-level
<gmpx-place-rating> Extended Component Library · Forms
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
5.9 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-rating on GitHub Docs for gmpx-place-rating
<gmpx-place-reviews> Extended Component Library · Content
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
6.6 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-place-reviews on GitHub Docs for gmpx-place-reviews
<gmpx-route-data-provider> Extended Component Library · Utilities
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
2.9 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-route-data-provider on GitHub Docs for gmpx-route-data-provider
<gmpx-route-marker> Extended Component Library · Media
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
2.4 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-route-marker on GitHub Docs for gmpx-route-marker
<gmpx-route-overview> Extended Component Library · Content
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
5.4 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-route-overview on GitHub Docs for gmpx-route-overview
<gmpx-route-polyline> Extended Component Library · Media
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
2.4 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-route-polyline on GitHub Docs for gmpx-route-polyline
<gmpx-split-layout> Extended Component Library · Layout
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
2.3 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-split-layout on GitHub Docs for gmpx-split-layout
<gmpx-store-locator> Extended Component Library · Content
Web Components for building rich experiences with the Google Maps JavaScript API.

JS
33.1 kB

CSS
∅

Library
12.1 kB

Popular
3 out of 5

Lit @googlemaps/extended-component-library on npm gmpx-store-locator on GitHub Docs for gmpx-store-locator
<google-chart> Google · Data
Encapsulates Google Charts into a web component

JS
12.2 kB

CSS
∅

Library
∅

Popular
2 out of 5

2y Lit @google-web-components/google-chart on npm google-chart on GitHub Docs for google-chart
<google-pay-button> Google · Actions
Web component for Google Pay button

JS
3.8 kB

CSS
∅

Library
∅

Popular
2 out of 5

1mo @google-pay/button-element on npm google-pay-button on GitHub Docs for google-pay-button
<heading-anchors> David Darnes · Content
A Web Component to add anchor links to headings with IDs

JS
0.4 kB

CSS
∅

Library
∅

@daviddarnes/heading-anchors on npm heading-anchors on GitHub Docs for heading-anchors Demo of heading-anchors
<heading-anchors> Zach Leatherman · Navigation
Adds and positions sibling anchor links for heading elements (h1,h2,h3,h4,h5,h6) when they have an `id` attribute.

JS
1.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/heading-anchors on npm heading-anchors on GitHub Docs for heading-anchors Demo of heading-anchors
<hex-alpha-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HEX format with alpha.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hex-alpha-color-picker on GitHub Docs for hex-alpha-color-picker
<hex-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HEX format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hex-color-picker on GitHub Docs for hex-color-picker
<hex-input> Serhii Kulykov · Forms
A custom element for entering color in HEX format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hex-input on GitHub Docs for hex-input
<hsl-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSL object format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsl-color-picker on GitHub Docs for hsl-color-picker
<hsl-string-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSL string format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsl-string-color-picker on GitHub Docs for hsl-string-color-picker
<hsla-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSLA object format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsla-color-picker on GitHub Docs for hsla-color-picker
<hsla-string-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSLA string format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsla-string-color-picker on GitHub Docs for hsla-string-color-picker
<hsv-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSV object format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsv-color-picker on GitHub Docs for hsv-color-picker
<hsv-string-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSV string format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsv-string-color-picker on GitHub Docs for hsv-string-color-picker
<hsva-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSVA object format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsva-color-picker on GitHub Docs for hsva-color-picker
<hsva-string-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses HSVA string format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm hsva-string-color-picker on GitHub Docs for hsva-string-color-picker
<html-include> Justin Fagnani · Content
Include HTML files into your page

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

html-include-element on npm html-include on GitHub Docs for html-include
<hyper-card> Zach Leatherman · Effects
Web component to add a three-dimensional hover effect to a card.

JS
1.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/hypercard on npm hyper-card on GitHub Docs for hyper-card Demo of hyper-card
<icon-fall> Zach Leatherman · Media
A web component to rain Font Awesome icons down your web site.

JS
1.7 kB

CSS
∅

Library
∅

@zachleat/icon-fall on npm icon-fall on GitHub Docs for icon-fall Demo of icon-fall
<if-> sakamies · Forms
Shows or hides content based on input element values, with companion or- and else- elements.

if- on GitHub Demo of if-
<image-compare> Cloud Four · Media
A tiny, zero-dependency web component for comparing two images using a slider. Built with a focus on accessibility, performance, and progressive enhancement.

JS
1.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

@cloudfour/image-compare on npm Docs for image-compare Demo of image-compare
<image-crop> GitHub · Media
Select area for cropping an image. This does not actually crop.

JS
2.3 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/image-crop-element on npm image-crop on GitHub Docs for image-crop
<img-comparison-slider> sneas · Media
Slider component to compare images before and after

JS
3.6 kB

CSS
0.1 kB

Library
∅

Popular
5 out of 5

img-comparison-slider on npm img-comparison-slider on GitHub Docs for img-comparison-slider
<include-fragment> GitHub · Content
A Client Side Includes tag.

JS
1.8 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/include-fragment-element on npm include-fragment on GitHub Docs for include-fragment
<infinity-burger> Zach Leatherman · Navigation
A new kind of hamburger menu.

JS
1.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

infinity-burger on npm infinity-burger on GitHub Docs for infinity-burger Demo of infinity-burger
~~<input-knob>~~ Archived Google Chrome Labs · Forms
A rotating, touch-sensitive knob web component that acts like an <input type="range">.

JS
2.1 kB

CSS
∅

Library
∅

input-knob on npm input-knob on GitHub Docs for input-knob
<is-land> Zach Leatherman · Utilities
A framework independent partial hydration islands architecture implementation.

JS
2.1 kB

CSS
∅

Library
∅

Popular
2 out of 5

@11ty/is-land on npm is-land on GitHub Docs for is-land Demo of is-land
<is-playing> David Darnes · Media
A Web Component to indicate when an audio, or video, element is playing

JS
0.4 kB

CSS
∅

Library
∅

@daviddarnes/is-playing on npm is-playing on GitHub Docs for is-playing Demo of is-playing
<ix-tree-node> Justin Fagnani · Data
An expandable tree view for inspecting JavaScript objects.

JS
11.2 kB

CSS
∅

Library
∅

Lit inspector-elements on npm ix-tree-node on GitHub Docs for ix-tree-node
<json-viewer> alenaksu ·

JS
9.9 kB

CSS
∅

Library
∅

Popular
2 out of 5

Lit @alenaksu/json-viewer on npm json-viewer on GitHub Docs for json-viewer
<katex-display> Justin Fagnani · Content
Web components for easily using KaTeX in HTML

JS
72.5 kB

CSS
∅

Library
∅

katex-elements on npm katex-display on GitHub Docs for katex-display
<katex-expr> Justin Fagnani · Content
Web components for easily using KaTeX in HTML

JS
72.5 kB

CSS
∅

Library
∅

katex-elements on npm katex-expr on GitHub Docs for katex-expr
<katex-inline> Justin Fagnani · Content
Web components for easily using KaTeX in HTML

JS
72.5 kB

CSS
∅

Library
∅

katex-elements on npm katex-inline on GitHub Docs for katex-inline
<kelp-autogrow> Kelp · Forms
Automatically grows a textarea’s height to fit its content as the user types.

JS
0.4 kB

CSS
0.2 kB

Library
∅

Popular
2 out of 5

kelpui on npm kelp-autogrow on GitHub Docs for kelp-autogrow
<kelp-disclosure> Kelp · Layout
Toggles the visibility of content with an accessible button, including dropdown menus.

JS
1.0 kB

CSS
∅

Library
∅

Popular
2 out of 5

kelpui on npm kelp-disclosure on GitHub Docs for kelp-disclosure
<kelp-form-ajax> Kelp · Forms
Submits a form with Ajax and announces submitting, success, and error messages.

JS
1.8 kB

CSS
0.2 kB

Library
∅

Popular
2 out of 5

kelpui on npm kelp-form-ajax on GitHub Docs for kelp-form-ajax
<kelp-form-validate> Kelp · Forms
Enhances native form validation with accessible, inline error messages.

JS
1.2 kB

CSS
∅

Library
∅

Popular
2 out of 5

kelpui on npm kelp-form-validate on GitHub Docs for kelp-form-validate
<kelp-heading-anchors> Kelp · Navigation
Adds anchor links to headings that have an ID.

JS
0.8 kB

CSS
0.2 kB

Library
∅

Popular
2 out of 5

kelpui on npm kelp-heading-anchors on GitHub Docs for kelp-heading-anchors
<kelp-html-ajax> Kelp · Content
Updates HTML on the page with fresh content from the server in response to events.

JS
0.9 kB

CSS
∅

Library
∅

Popular
2 out of 5

kelpui on npm kelp-html-ajax on GitHub Docs for kelp-html-ajax
<kelp-select-all> Kelp · Forms
A checkbox that selects or clears a group of related checkboxes.

JS
0.7 kB

CSS
0.1 kB

Library
∅

Popular
2 out of 5

kelpui on npm kelp-select-all on GitHub Docs for kelp-select-all
<kelp-subnav> Kelp · Navigation
Enhances navigation submenus so they close on outside clicks and the escape key.

JS
0.7 kB

CSS
∅

Library
∅

Popular
2 out of 5

kelpui on npm kelp-subnav on GitHub Docs for kelp-subnav
<kelp-tabs> Kelp · Navigation
Progressively enhances a list of anchor links and content sections into an accessible tabbed interface.

JS
1.3 kB

CSS
0.3 kB

Library
∅

Popular
2 out of 5

kelpui on npm kelp-tabs on GitHub Docs for kelp-tabs
<kelp-toc> Kelp · Navigation
Generates a table of contents from the headings on the page.

JS
1.0 kB

CSS
∅

Library
∅

Popular
2 out of 5

kelpui on npm kelp-toc on GitHub Docs for kelp-toc
<kelp-toggle-pw> Kelp · Forms
Toggles the visibility of password fields with a button or checkbox.

JS
0.7 kB

CSS
0.1 kB

Library
∅

Popular
2 out of 5

kelpui on npm kelp-toggle-pw on GitHub Docs for kelp-toggle-pw
<kelp-until-selected> Kelp · Forms
Hides or disables content until a related field has a value selected.

JS
1.0 kB

CSS
∅

Library
∅

Popular
2 out of 5

kelpui on npm kelp-until-selected on GitHub Docs for kelp-until-selected
<kor-accordion> Kor UI · Layout
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-accordion on GitHub Docs for kor-accordion
<kor-app-bar> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-app-bar on GitHub Docs for kor-app-bar
<kor-avatar> Kor UI · Media
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-avatar on GitHub Docs for kor-avatar
<kor-badge> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-badge on GitHub Docs for kor-badge
<kor-breadcrumb-item> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-breadcrumb-item on GitHub Docs for kor-breadcrumb-item
<kor-breadcrumbs> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-breadcrumbs on GitHub Docs for kor-breadcrumbs
<kor-button> Kor UI · Actions
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-button on GitHub Docs for kor-button
<kor-card> Kor UI · Layout
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-card on GitHub Docs for kor-card
<kor-checkbox> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-checkbox on GitHub Docs for kor-checkbox
<kor-divider> Kor UI · Layout
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-divider on GitHub Docs for kor-divider
<kor-drawer> Kor UI · Overlays
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-drawer on GitHub Docs for kor-drawer
<kor-empty-state> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-empty-state on GitHub Docs for kor-empty-state
<kor-grid> Kor UI · Layout
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-grid on GitHub Docs for kor-grid
<kor-icon> Kor UI · Media
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-icon on GitHub Docs for kor-icon
<kor-image> Kor UI · Media
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-image on GitHub Docs for kor-image
<kor-input> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-input on GitHub Docs for kor-input
<kor-menu-item> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-menu-item on GitHub Docs for kor-menu-item
<kor-modal> Kor UI · Overlays
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-modal on GitHub Docs for kor-modal
<kor-nav-bar> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-nav-bar on GitHub Docs for kor-nav-bar
<kor-notification-item> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-notification-item on GitHub Docs for kor-notification-item
<kor-notifications> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-notifications on GitHub Docs for kor-notifications
<kor-page> Kor UI · Layout
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-page on GitHub Docs for kor-page
<kor-pane> Kor UI · Layout
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-pane on GitHub Docs for kor-pane
<kor-popover> Kor UI · Overlays
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-popover on GitHub Docs for kor-popover
<kor-progress-bar> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-progress-bar on GitHub Docs for kor-progress-bar
<kor-radio-button> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-radio-button on GitHub Docs for kor-radio-button
<kor-slider> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-slider on GitHub Docs for kor-slider
<kor-spinner> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-spinner on GitHub Docs for kor-spinner
<kor-stepper> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-stepper on GitHub Docs for kor-stepper
<kor-stepper-item> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-stepper-item on GitHub Docs for kor-stepper-item
<kor-swipe-action> Kor UI · Utilities
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-swipe-action on GitHub Docs for kor-swipe-action
<kor-swipe-actions> Kor UI · Utilities
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-swipe-actions on GitHub Docs for kor-swipe-actions
<kor-switch> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-switch on GitHub Docs for kor-switch
<kor-switch-item> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-switch-item on GitHub Docs for kor-switch-item
<kor-tab-item> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-tab-item on GitHub Docs for kor-tab-item
<kor-table> Kor UI · Data
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-table on GitHub Docs for kor-table
<kor-table-cell> Kor UI · Data
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-table-cell on GitHub Docs for kor-table-cell
<kor-table-row> Kor UI · Data
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-table-row on GitHub Docs for kor-table-row
<kor-tabs> Kor UI · Navigation
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-tabs on GitHub Docs for kor-tabs
<kor-tag> Kor UI · Feedback
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-tag on GitHub Docs for kor-tag
<kor-text> Kor UI · Content
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-text on GitHub Docs for kor-text
<kor-textarea> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-textarea on GitHub Docs for kor-textarea
<kor-toggle> Kor UI · Forms
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-toggle on GitHub Docs for kor-toggle
<kor-tool> Kor UI · Utilities
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-tool on GitHub Docs for kor-tool
<kor-tooltip> Kor UI · Overlays
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.

JS
23.7 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y Lit @kor-ui/kor on npm kor-tooltip on GitHub Docs for kor-tooltip
<l-i> LeKoala · Media
One custom icon element to rule them all

JS
2.2 kB

CSS
2.6 kB

Library
∅

Popular
1 out of 5

last-icon on npm l-i on GitHub Docs for l-i
<lazy-img> Aaron Gustafson · Media
Web component that enables you to lazy load an image based on screen size

JS
3.0 kB

CSS
∅

Library
∅

@aarongustafson/lazy-img on npm lazy-img on GitHub Docs for lazy-img Demo of lazy-img
<line-numbers> Zach Leatherman · Content
A web component to add line numbers next to various HTML elements.

JS
2.1 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/line-numbers on npm line-numbers on GitHub Docs for line-numbers Demo of line-numbers
<link-peek> David Darnes · Navigation
A Web Component to unfurl regular links into rich previews

JS
0.6 kB

CSS
∅

Library
∅

Popular
2 out of 5

@daviddarnes/link-peek on npm link-peek on GitHub Docs for link-peek Demo of link-peek
<link-preview> Ric Wood · Navigation
Custom element to hover link previews

JS
25.9 kB

CSS
∅

Library
∅

Lit @grislyeye/link-preview on npm link-preview on GitHub Docs for link-preview Demo of link-preview
<lite-vimeo> Alex Russell · Media
A web component that loads Vimeo embed iframes faster. ShadowDom based version of Paul Irish' concept.

JS
2.3 kB

CSS
∅

Library
∅

Popular
4 out of 5

@slightlyoff/lite-vimeo on npm lite-vimeo on GitHub Docs for lite-vimeo
<lite-youtube> Justin Ribeiro · Media
A web component that loads YouTube embed iframes faster. ShadowDom based version of Paul Irish' concept.

JS
3.3 kB

CSS
∅

Library
∅

Popular
5 out of 5

@justinribeiro/lite-youtube on npm lite-youtube on GitHub Docs for lite-youtube
<lite-youtube> Paul Irish · Media
A faster youtube embed.

JS
1.5 kB

CSS
0.9 kB

Library
∅

Popular
5 out of 5

lite-youtube-embed on npm lite-youtube on GitHub Docs for lite-youtube Demo of lite-youtube
<live-filter> David Darnes · Feedback
A Web Component for filtering items using a text input

JS
0.4 kB

CSS
∅

Library
∅

@daviddarnes/live-filter on npm live-filter on GitHub Docs for live-filter Demo of live-filter
~~<local-time>~~ Deprecated GitHub · Data
Formats a timestamp as a localized date and time.
Superseded by <relative-time>

JS
3.2 kB

CSS
∅

Library
∅

@github/time-elements on npm local-time on GitHub
<log-form> Nathan Knowler · Utilities
Logs a form’s submissions to the console.

log-form on GitHub Demo of log-form
~~<lottie-player>~~ Archived LottieFiles · Media
Lottie animation and Telegram Sticker player web components.

JS
98.4 kB

CSS
∅

Library
∅

Lit @lottiefiles/lottie-player on npm lottie-player on GitHub Docs for lottie-player
<markdown-toolbar> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm markdown-toolbar on GitHub Docs for markdown-toolbar
<mastodon-post> David Darnes · Content
A Web Component to display Mastodon posts and their metadata

JS
0.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

@daviddarnes/mastodon-post on npm mastodon-post on GitHub Docs for mastodon-post Demo of mastodon-post
<md-assist-chip> Material Web · Forms
TODO(b/243982145): add docs

JS
7.8 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-assist-chip on GitHub Docs for md-assist-chip
<md-badge> Material Web · Feedback
Material web components

JS
1.5 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-badge on GitHub Docs for md-badge
<md-bold> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-bold on GitHub Docs for md-bold
<md-branded-fab> Material Web · Actions
Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.

JS
7.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-branded-fab on GitHub Docs for md-branded-fab
<md-checkbox> Material Web · Forms
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

JS
8.0 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-checkbox on GitHub Docs for md-checkbox
<md-chip-set> Material Web · Forms
TODO(b/243982145): add docs

JS
6.0 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-chip-set on GitHub Docs for md-chip-set
<md-circular-progress> Material Web · Feedback
Circular progress indicators display progress by animating along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

JS
3.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-circular-progress on GitHub Docs for md-circular-progress
<md-code> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-code on GitHub Docs for md-code
<md-dialog> Material Web · Overlays
Dialogs can require an action, communicate information, or help users accomplish a task. There are two types of dialogs: basic and full-screen.

JS
5.8 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-dialog on GitHub Docs for md-dialog
<md-divider> Material Web · Layout
A divider is a thin line that groups content in lists and containers.

JS
0.7 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-divider on GitHub Docs for md-divider
<md-elevated-button> Material Web · Actions
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.

JS
8.6 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-elevated-button on GitHub Docs for md-elevated-button
<md-elevated-card> Material Web · Layout
Material web components

JS
1.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-elevated-card on GitHub Docs for md-elevated-card
<md-elevation> Material Web · Layout
The `<md-elevation>` custom element with default styles.

JS
0.7 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-elevation on GitHub Docs for md-elevation
<md-fab> Material Web · Actions
Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.

JS
7.9 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-fab on GitHub Docs for md-fab
<md-filled-button> Material Web · Actions
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.

JS
8.6 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-button on GitHub Docs for md-filled-button
<md-filled-card> Material Web · Layout
Material web components

JS
1.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-card on GitHub Docs for md-filled-card
<md-filled-field> Material Web · Forms
TODO(b/228525797): add docs

JS
5.5 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-field on GitHub Docs for md-filled-field
<md-filled-icon-button> Material Web · Media
Icon buttons help people take supplementary actions with a single tap.

JS
8.3 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-icon-button on GitHub Docs for md-filled-icon-button
<md-filled-select> Material Web · Forms
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu.

JS
21.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-select on GitHub Docs for md-filled-select
<md-filled-text-field> Material Web · Content
TODO(b/228525797): Add docs

JS
13.6 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-text-field on GitHub Docs for md-filled-text-field
<md-filled-tonal-button> Material Web · Actions
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.

JS
8.6 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-tonal-button on GitHub Docs for md-filled-tonal-button
<md-filled-tonal-icon-button> Material Web · Media
Icon buttons help people take supplementary actions with a single tap.

JS
8.3 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filled-tonal-icon-button on GitHub Docs for md-filled-tonal-icon-button
<md-filter-chip> Material Web · Forms
TODO(b/243982145): add docs

JS
9.5 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-filter-chip on GitHub Docs for md-filter-chip
<md-focus-ring> Material Web · Utilities
TODO(b/267336424): add docs

JS
1.6 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-focus-ring on GitHub Docs for md-focus-ring
<md-header> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-header on GitHub Docs for md-header
<md-icon> Material Web · Media
Material web components

JS
0.7 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-icon on GitHub Docs for md-icon
<md-icon-button> Material Web · Media
Icon buttons help people take supplementary actions with a single tap.

JS
8.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-icon-button on GitHub Docs for md-icon-button
<md-image> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-image on GitHub Docs for md-image
<md-input-chip> Material Web · Forms
TODO(b/243982145): add docs

JS
8.8 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-input-chip on GitHub Docs for md-input-chip
<md-italic> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-italic on GitHub Docs for md-italic
<md-item> Material Web · Layout
An item layout component that can be used inside list items to give them their customizable structure.

JS
1.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-item on GitHub Docs for md-item
<md-linear-progress> Material Web · Feedback
Linear progress indicators display progress by animating along the length of a fixed, visible track.

JS
3.8 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-linear-progress on GitHub Docs for md-linear-progress
<md-link> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-link on GitHub Docs for md-link
<md-list> Material Web · Data
Lists are continuous, vertical indexes of text or images.

JS
1.7 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-list on GitHub Docs for md-list
<md-list-item> Material Web · Data
Lists are continuous, vertical indexes of text or images. Items are placed inside the list.

JS
7.5 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-list-item on GitHub Docs for md-list-item
<md-mention> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-mention on GitHub Docs for md-mention
<md-menu> Material Web · Navigation
Menus display a list of choices on a temporary surface.

JS
9.4 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-menu on GitHub Docs for md-menu
<md-menu-item> Material Web · Navigation
Menus display a list of choices on a temporary surface.

JS
8.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-menu-item on GitHub Docs for md-menu-item
<md-navigation-bar> Material Web · Navigation
Material web components

JS
3.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-navigation-bar on GitHub Docs for md-navigation-bar
<md-navigation-drawer> Material Web · Navigation
Material web components

JS
2.9 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-navigation-drawer on GitHub Docs for md-navigation-drawer
<md-navigation-drawer-modal> Material Web · Navigation
Material web components

JS
2.7 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-navigation-drawer-modal on GitHub Docs for md-navigation-drawer-modal
<md-navigation-tab> Material Web · Navigation
Material web components

JS
7.3 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-navigation-tab on GitHub Docs for md-navigation-tab
<md-ordered-list> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-ordered-list on GitHub Docs for md-ordered-list
<md-outlined-button> Material Web · Actions
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.

JS
8.3 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-button on GitHub Docs for md-outlined-button
<md-outlined-card> Material Web · Layout
Material web components

JS
1.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-card on GitHub Docs for md-outlined-card
<md-outlined-field> Material Web · Forms
TODO(b/228525797): add docs

JS
5.8 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-field on GitHub Docs for md-outlined-field
<md-outlined-icon-button> Material Web · Media
Icon buttons help people take supplementary actions with a single tap.

JS
8.3 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-icon-button on GitHub Docs for md-outlined-icon-button
<md-outlined-segmented-button> Material Web · Forms
MdOutlinedSegmentedButton is the custom element for the Material Design outlined segmented button component.

JS
7.4 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-segmented-button on GitHub Docs for md-outlined-segmented-button
<md-outlined-segmented-button-set> Material Web · Forms
MdOutlinedSegmentedButtonSet is the custom element for the Material Design outlined segmented button set component.

JS
2.4 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-segmented-button-set on GitHub Docs for md-outlined-segmented-button-set
<md-outlined-select> Material Web · Forms
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu.

JS
21.4 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-select on GitHub Docs for md-outlined-select
<md-outlined-text-field> Material Web · Content
TODO(b/228525797): Add docs

JS
13.8 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-outlined-text-field on GitHub Docs for md-outlined-text-field
<md-primary-tab> Material Web · Navigation
Tab allow users to display a tab within a Tabs.

JS
7.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-primary-tab on GitHub Docs for md-primary-tab
<md-quote> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-quote on GitHub Docs for md-quote
<md-radio> Material Web · Forms
Radio buttons allow users to select one option from a set.

JS
7.6 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-radio on GitHub Docs for md-radio
<md-ref> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-ref on GitHub Docs for md-ref
<md-ripple> Material Web · Feedback
Ripples, also known as state layers, are visual indicators used to communicate the status of a component or interactive element.

JS
3.4 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-ripple on GitHub Docs for md-ripple
<md-secondary-tab> Material Web · Navigation
Tab allow users to display a tab within a Tabs.

JS
7.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-secondary-tab on GitHub Docs for md-secondary-tab
<md-select-option> Material Web · Forms
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu.

JS
8.0 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-select-option on GitHub Docs for md-select-option
<md-slider> Material Web · Forms
Sliders allow users to view and select a value (or range) along a track.

JS
11.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-slider on GitHub Docs for md-slider
<md-strikethrough> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-strikethrough on GitHub Docs for md-strikethrough
<md-sub-menu> Material Web · Navigation
Menus display a list of choices on a temporary surface.

JS
10.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-sub-menu on GitHub Docs for md-sub-menu
<md-suggestion-chip> Material Web · Forms
TODO(b/243982145): add docs

JS
7.9 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-suggestion-chip on GitHub Docs for md-suggestion-chip
<md-switch> Material Web · Forms
Switches toggle the state of a single item on or off.

JS
9.0 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-switch on GitHub Docs for md-switch
<md-tabs> Material Web · Navigation
Tabs displays a list of selectable tabs.

JS
7.2 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-tabs on GitHub Docs for md-tabs
<md-task-list> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-task-list on GitHub Docs for md-task-list
<md-text-button> Material Web · Content
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.

JS
8.1 kB

CSS
∅

Library
6.8 kB

Popular
5 out of 5

Lit @material/web on npm md-text-button on GitHub Docs for md-text-button
<md-unordered-list> GitHub · Content
Markdown formatting buttons for text inputs.

JS
3.7 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/markdown-toolbar-element on npm md-unordered-list on GitHub Docs for md-unordered-list
<media-captions-button> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
6.2 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-captions-button on GitHub Docs for media-captions-button
<media-control-bar> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
1.0 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-control-bar on GitHub Docs for media-control-bar
<media-controller> Media Chrome · Media
Media Controller should not mimic the HTMLMediaElement API.

JS
17.5 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-controller on GitHub Docs for media-controller
<media-fullscreen-button> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.3 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-fullscreen-button on GitHub Docs for media-fullscreen-button
<media-loading-indicator> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
2.7 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-loading-indicator on GitHub Docs for media-loading-indicator
<media-mute-button> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.4 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-mute-button on GitHub Docs for media-mute-button
<media-pip-button> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.1 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-pip-button on GitHub Docs for media-pip-button
<media-play-button> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.0 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-play-button on GitHub Docs for media-play-button
<media-playback-rate-button> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.6 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-playback-rate-button on GitHub Docs for media-playback-rate-button
<media-poster-image> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
0.8 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-poster-image on GitHub Docs for media-poster-image
<media-settings-menu> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.8 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-settings-menu on GitHub Docs for media-settings-menu
<media-theme> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
4.5 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-theme on GitHub Docs for media-theme
<media-time-display> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
4.1 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-time-display on GitHub Docs for media-time-display
<media-time-range> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
11.6 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-time-range on GitHub Docs for media-time-range
<media-volume-range> Media Chrome · Media
Custom elements (web components) for making audio and video player controls that look great in your website or app.

JS
5.7 kB

CSS
∅

Library
3.0 kB

Popular
5 out of 5

media-chrome on npm media-volume-range on GitHub Docs for media-volume-range
<micro-lighter> Dave Rupert · Content
A tiny, dependency-free syntax highlighter built on the CSS Custom Highlight API and TextMate grammars.

JS
15.4 kB

CSS
7.3 kB

Library
∅

Popular
3 out of 5

microlighter on npm micro-lighter on GitHub Docs for micro-lighter
<midi-player> Ondřej Cífka · Media
MIDI file player and visualizer web components

JS
347.2 kB

CSS
∅

Library
∅

Popular
3 out of 5

html-midi-player on npm midi-player on GitHub Docs for midi-player Demo of midi-player
<midi-visualizer> Ondřej Cífka · Forms
MIDI file player and visualizer web components

JS
347.2 kB

CSS
∅

Library
∅

Popular
3 out of 5

html-midi-player on npm midi-visualizer on GitHub Docs for midi-visualizer Demo of midi-visualizer
<model-viewer> Google · Media
Easily display interactive 3D models on the web and in AR!

JS
310.9 kB

CSS
∅

Library
∅

Popular
4 out of 5

Lit @google/model-viewer on npm model-viewer on GitHub Docs for model-viewer
<mouse-trail> Erik Kroes · Utilities
Party like it's 1999: add a trail to your mouse.

7y Lit @erikkroes/mouse-trail on npm mouse-trail on GitHub Docs for mouse-trail
<multistep-form> Raymond Camden · Forms
Progressively enhances a long form into a multistep flow that still submits normally without JavaScript.

Docs for multistep-form Demo of multistep-form
<mux-player> Mux · Media
An open source Mux player web component that Just Works™

JS
324.9 kB

CSS
∅

Library
∅

Popular
5 out of 5

@mux/mux-player on npm mux-player on GitHub Docs for mux-player
<mux-video> Mux · Media
A custom mux video element for the browser that Just Works™

JS
239.0 kB

CSS
∅

Library
∅

Popular
5 out of 5

@mux/mux-video on npm mux-video on GitHub Docs for mux-video
<ninja-keys> Serhii Slieptsov · Overlays
Ninja Keys

JS
18.2 kB

CSS
∅

Library
∅

Popular
3 out of 5

Lit ninja-keys on npm ninja-keys on GitHub Docs for ninja-keys Demo of ninja-keys
<no-script> Erik Kroes · Feedback
The Web Component that works without JavaScript. Send a message to users without JavaScript.

JS
0.2 kB

CSS
∅

Library
∅

6y @erikkroes/no-script on npm no-script on GitHub Docs for no-script
<no-spoilers> Andrico Karoulla · Content
Webcomponent no-spoilers following open-wc recommendations

JS
0.8 kB

CSS
∅

Library
∅

no-spoilers on npm
<nve-accordion> NVIDIA Elements · Layout
An accordion is a vertical stack of interactive headings used to toggle the display of further information.

JS
35.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-accordion on GitHub Docs for nve-accordion
<nve-accordion-content> NVIDIA Elements · Layout
Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.

JS
35.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-accordion-content on GitHub Docs for nve-accordion-content
<nve-accordion-group> NVIDIA Elements · Layout
Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.

JS
35.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-accordion-group on GitHub Docs for nve-accordion-group
<nve-accordion-header> NVIDIA Elements · Layout
Provides the clickable heading region of an accordion that toggles the visibility of associated content.

JS
35.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-accordion-header on GitHub Docs for nve-accordion-header
<nve-alert> NVIDIA Elements · Feedback
Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

JS
35.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-alert on GitHub Docs for nve-alert
<nve-alert-group> NVIDIA Elements · Feedback
An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.

JS
35.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-alert-group on GitHub Docs for nve-alert-group
<nve-avatar> NVIDIA Elements · Media
Avatar represents a user/bot within a UI. Typically with text or image content.

JS
0.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-avatar on GitHub Docs for nve-avatar
<nve-avatar-group> NVIDIA Elements · Media
An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.

JS
0.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-avatar-group on GitHub Docs for nve-avatar-group
<nve-badge> NVIDIA Elements · Feedback
A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.

JS
28.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-badge on GitHub Docs for nve-badge
<nve-breadcrumb> NVIDIA Elements · Navigation
Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.

JS
28.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-breadcrumb on GitHub Docs for nve-breadcrumb
<nve-button> NVIDIA Elements · Actions
A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

JS
6.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-button on GitHub Docs for nve-button
<nve-button-group> NVIDIA Elements · Actions
A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.

JS
3.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-button-group on GitHub Docs for nve-button-group
<nve-card> NVIDIA Elements · Layout
A container for content representing a single entity.

JS
1.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-card on GitHub Docs for nve-card
<nve-card-content> NVIDIA Elements · Layout
Contains the primary body content of a card, providing a structured region for the main information or media.

JS
1.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-card-content on GitHub Docs for nve-card-content
<nve-card-footer> NVIDIA Elements · Layout
Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.

JS
1.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-card-footer on GitHub Docs for nve-card-footer
<nve-card-header> NVIDIA Elements · Layout
Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.

JS
1.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-card-header on GitHub Docs for nve-card-header
<nve-chat-message> NVIDIA Elements · Feedback
A chat message component displays a text message within a conversation, sent between users or bots

JS
0.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-chat-message on GitHub Docs for nve-chat-message
<nve-checkbox> NVIDIA Elements · Forms
A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.

JS
33.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-checkbox on GitHub Docs for nve-checkbox
<nve-checkbox-group> NVIDIA Elements · Forms
Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.

JS
33.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-checkbox-group on GitHub Docs for nve-checkbox-group
<nve-color> NVIDIA Elements · Forms
A color picker is a control that enables users to choose a color value.

JS
38.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-color on GitHub Docs for nve-color
<nve-combobox> NVIDIA Elements · Forms
An editable combobox with autocomplete behavior and selection support.

JS
48.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-combobox on GitHub Docs for nve-combobox
<nve-control> NVIDIA Elements · Forms
Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-control on GitHub Docs for nve-control
<nve-control-group> NVIDIA Elements · Layout
Groups many related form controls under a shared label and validation context for semantically linked inputs.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-control-group on GitHub Docs for nve-control-group
<nve-control-message> NVIDIA Elements · Feedback
Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-control-message on GitHub Docs for nve-control-message
<nve-copy-button> NVIDIA Elements · Actions
A copy button is a button that easily enables the copy to clipboard pattern.

JS
38.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-copy-button on GitHub Docs for nve-copy-button
<nve-date> NVIDIA Elements · Data
A date picker is a control that enables users to choose a date value.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-date on GitHub Docs for nve-date
<nve-datetime> NVIDIA Elements · Forms
A datetime picker is a control that enables users to choose a datetime value.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-datetime on GitHub Docs for nve-datetime
<nve-dialog> NVIDIA Elements · Overlays
Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.

JS
37.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dialog on GitHub Docs for nve-dialog
<nve-dialog-footer> NVIDIA Elements · Overlays
Contains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating.

JS
37.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dialog-footer on GitHub Docs for nve-dialog-footer
<nve-dialog-header> NVIDIA Elements · Overlays
Displays the title and contextual information at the top of a dialog to orient users to the dialog's purpose.

JS
37.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dialog-header on GitHub Docs for nve-dialog-header
<nve-divider> NVIDIA Elements · Layout
Divider is a component that separates and distinguishes sections of content or groups of menuitems.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-divider on GitHub Docs for nve-divider
<nve-dot> NVIDIA Elements · Feedback
A visual indicator that communicates a status or notification of an associated component.

JS
0.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dot on GitHub Docs for nve-dot
<nve-drawer> NVIDIA Elements · Overlays
A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.

JS
38.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-drawer on GitHub Docs for nve-drawer
<nve-drawer-content> NVIDIA Elements · Overlays
Contains the scrollable main body content within a drawer panel.

JS
38.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-drawer-content on GitHub Docs for nve-drawer-content
<nve-drawer-footer> NVIDIA Elements · Overlays
Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.

JS
38.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-drawer-footer on GitHub Docs for nve-drawer-footer
<nve-drawer-header> NVIDIA Elements · Overlays
Displays the title and optional close control at the top of a drawer to identify its purpose.

JS
38.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-drawer-header on GitHub Docs for nve-drawer-header
<nve-dropdown> NVIDIA Elements · Overlays
Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.

JS
37.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dropdown on GitHub Docs for nve-dropdown
<nve-dropdown-footer> NVIDIA Elements · Overlays
Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.

JS
37.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dropdown-footer on GitHub Docs for nve-dropdown-footer
<nve-dropdown-group> NVIDIA Elements · Overlays
A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience

JS
1.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dropdown-group on GitHub Docs for nve-dropdown-group
<nve-dropdown-header> NVIDIA Elements · Overlays
Displays a title or contextual label at the top of a dropdown menu to categorize its contents.

JS
37.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dropdown-header on GitHub Docs for nve-dropdown-header
<nve-dropzone> NVIDIA Elements · Forms
A dropzone form control that enables users to drag and drop files onto it.

JS
31.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-dropzone on GitHub Docs for nve-dropzone
<nve-file> NVIDIA Elements · Forms
A file picker is a control that enables users to choose a file value.

JS
32.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-file on GitHub Docs for nve-file
<nve-format-bytes> NVIDIA Elements · Data
Formats a byte count as localized, human-readable decimal or binary units.

JS
1.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-format-bytes on GitHub Docs for nve-format-bytes
<nve-format-datetime> NVIDIA Elements · Data
Formats a date/time value as localized text using the Intl.DateTimeFormat API.

JS
1.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-format-datetime on GitHub Docs for nve-format-datetime
<nve-format-number> NVIDIA Elements · Data
A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.

JS
1.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-format-number on GitHub Docs for nve-format-number
<nve-format-relative-time> NVIDIA Elements · Data
Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API.

JS
1.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-format-relative-time on GitHub Docs for nve-format-relative-time
<nve-format-truncate> NVIDIA Elements · Data
Truncates text at its start, center, or end while preserving the full text for assistive technology.

JS
2.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-format-truncate on GitHub Docs for nve-format-truncate
<nve-gauge> NVIDIA Elements · Utilities
Use a gauge to show system resource usage.

JS
4.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-gauge on GitHub Docs for nve-gauge
<nve-grid> NVIDIA Elements · Layout
A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data.

JS
6.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid on GitHub Docs for nve-grid
<nve-grid-cell> NVIDIA Elements · Layout
Represents an individual data cell within a grid row, displaying content aligned to its parent column.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid-cell on GitHub Docs for nve-grid-cell
<nve-grid-column> NVIDIA Elements · Layout
Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid-column on GitHub Docs for nve-grid-column
<nve-grid-footer> NVIDIA Elements · Layout
Grid footer displays contextual information or user actions such as pagination.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid-footer on GitHub Docs for nve-grid-footer
<nve-grid-header> NVIDIA Elements · Layout
Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid-header on GitHub Docs for nve-grid-header
<nve-grid-placeholder> NVIDIA Elements · Layout
Placeholder displays a message while data loads for the grid or shows empty states for datasets.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid-placeholder on GitHub Docs for nve-grid-placeholder
<nve-grid-row> NVIDIA Elements · Layout
Represents a horizontal row of data cells within a grid, supporting selection and interactive states.

JS
0.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-grid-row on GitHub Docs for nve-grid-row
<nve-icon> NVIDIA Elements · Media
An icon is a graphic symbol designed to visually show the purpose of an interface element.

JS
26.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-icon on GitHub Docs for nve-icon
<nve-icon-button> NVIDIA Elements · Media
An icon button is a button that displays only an icon without a visual label.

JS
32.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-icon-button on GitHub Docs for nve-icon-button
<nve-input> NVIDIA Elements · Forms
An input is a control that enables users to enter text.

JS
32.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-input on GitHub Docs for nve-input
<nve-input-group> NVIDIA Elements · Forms
Visually combines many related input controls into a unified composite field with shared styling.

JS
32.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-input-group on GitHub Docs for nve-input-group
<nve-logo> NVIDIA Elements · Media
A visual indicator for a brand or application.

JS
0.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-logo on GitHub Docs for nve-logo
<nve-menu> NVIDIA Elements · Navigation
A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.

JS
34.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-menu on GitHub Docs for nve-menu
<nve-menu-group> NVIDIA Elements · Navigation
Organizes related menu items under a disclosure header that can show or hide one child menu.

JS
34.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-menu-group on GitHub Docs for nve-menu-group
<nve-menu-item> NVIDIA Elements · Navigation
Represents a selectable option within a menu, providing an interactive button for navigation or actions.

JS
34.7 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-menu-item on GitHub Docs for nve-menu-item
<nve-month> NVIDIA Elements · Forms
A month picker is a control that enables users to choose a month value.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-month on GitHub Docs for nve-month
<nve-notification> NVIDIA Elements · Feedback
Displays real time updates without interrupting the user's workflow to communicate an important message or status.

JS
37.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-notification on GitHub Docs for nve-notification
<nve-notification-group> NVIDIA Elements · Feedback
Displays real time updates without interrupting the user's workflow to communicate an important message or status.

JS
37.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-notification-group on GitHub Docs for nve-notification-group
<nve-page> NVIDIA Elements · Layout
Provide a consistent page structure across the applications, ensuring a seamless user experience.

JS
4.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page on GitHub Docs for nve-page
<nve-page-header> NVIDIA Elements · Layout
An element that appears across the top of all pages containing the application name and primary navigation.

JS
0.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page-header on GitHub Docs for nve-page-header
<nve-page-loader> NVIDIA Elements · Layout
Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.

JS
31.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page-loader on GitHub Docs for nve-page-loader
<nve-page-panel> NVIDIA Elements · Layout
Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page-panel on GitHub Docs for nve-page-panel
<nve-page-panel-content> NVIDIA Elements · Layout
Contains the scrollable main body content within a page panel region.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page-panel-content on GitHub Docs for nve-page-panel-content
<nve-page-panel-footer> NVIDIA Elements · Layout
Provides a fixed action area at the bottom of a page panel for persistent controls or status information.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page-panel-footer on GitHub Docs for nve-page-panel-footer
<nve-page-panel-header> NVIDIA Elements · Layout
Displays the title and contextual controls at the top of a page panel to identify its purpose.

JS
0.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-page-panel-header on GitHub Docs for nve-page-panel-header
<nve-pagination> NVIDIA Elements · Navigation
Pagination is a control that enables users to navigate through pages of content.

JS
50.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-pagination on GitHub Docs for nve-pagination
<nve-panel> NVIDIA Elements · Layout
Panel is inline container for content that couples to the content on the page (details, extra actions/options).

JS
34.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-panel on GitHub Docs for nve-panel
<nve-panel-content> NVIDIA Elements · Layout
Contains the main body content within a panel, providing a structured region for detailed information.

JS
34.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-panel-content on GitHub Docs for nve-panel-content
<nve-panel-footer> NVIDIA Elements · Layout
Provides a designated area at the bottom of a panel for actions or supplementary controls.

JS
34.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-panel-footer on GitHub Docs for nve-panel-footer
<nve-panel-header> NVIDIA Elements · Layout
Displays the title, subtitle, and optional action controls at the top of a panel.

JS
34.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-panel-header on GitHub Docs for nve-panel-header
<nve-password> NVIDIA Elements · Forms
A password is a control that enables users to enter password text.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-password on GitHub Docs for nve-password
<nve-preferences-input> NVIDIA Elements · Forms
A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.

JS
42.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-preferences-input on GitHub Docs for nve-preferences-input
<nve-progress-bar> NVIDIA Elements · Feedback
A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.

JS
2.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-progress-bar on GitHub Docs for nve-progress-bar
<nve-progress-ring> NVIDIA Elements · Feedback
The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.

JS
28.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-progress-ring on GitHub Docs for nve-progress-ring
<nve-progressive-filter-chip> NVIDIA Elements · Forms
A filter chip is a control that enables users to select many options from a set of choices.

JS
47.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-progressive-filter-chip on GitHub Docs for nve-progressive-filter-chip
<nve-pulse> NVIDIA Elements · Layout
Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.

JS
26.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-pulse on GitHub Docs for nve-pulse
<nve-radio> NVIDIA Elements · Forms
A radio button is a control that enables users to choose one option from a list of mutually exclusive options.

JS
32.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-radio on GitHub Docs for nve-radio
<nve-radio-group> NVIDIA Elements · Forms
Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.

JS
32.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-radio-group on GitHub Docs for nve-radio-group
<nve-range> NVIDIA Elements · Forms
A range slider is a control that enables users to choose a value from a continuous range of values.

JS
33.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-range on GitHub Docs for nve-range
<nve-resize-handle> NVIDIA Elements · Layout
A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.

JS
7.5 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-resize-handle on GitHub Docs for nve-resize-handle
<nve-search> NVIDIA Elements · Utilities
A search is a control that enables users to enter text to search.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-search on GitHub Docs for nve-search
<nve-select> NVIDIA Elements · Forms
A select is a control that enables users to select an option from a list of options.

JS
46.4 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-select on GitHub Docs for nve-select
<nve-skeleton> NVIDIA Elements · Feedback
A loading placeholder component that displays animated placeholder shapes while content loads.

JS
1.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-skeleton on GitHub Docs for nve-skeleton
<nve-sort-button> NVIDIA Elements · Actions
A sort button is a control that enables users to sort a list of items in ascending or descending order.

JS
31.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-sort-button on GitHub Docs for nve-sort-button
<nve-sparkline> NVIDIA Elements · Data
A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).

JS
3.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-sparkline on GitHub Docs for nve-sparkline
<nve-star-rating> NVIDIA Elements · Forms
A star rating component lets users rate something using stars, providing a quick visual representation of feedback

JS
32.3 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-star-rating on GitHub Docs for nve-star-rating
<nve-steps> NVIDIA Elements · Navigation
Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.

JS
37.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-steps on GitHub Docs for nve-steps
<nve-steps-item> NVIDIA Elements · Layout
Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.

JS
37.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-steps-item on GitHub Docs for nve-steps-item
<nve-switch> NVIDIA Elements · Forms
A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.

JS
32.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-switch on GitHub Docs for nve-switch
<nve-switch-group> NVIDIA Elements · Forms
A switch group is a container for a group of switches.

JS
32.9 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-switch-group on GitHub Docs for nve-switch-group
<nve-tabs> NVIDIA Elements · Navigation
Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.

JS
9.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tabs on GitHub Docs for nve-tabs
<nve-tabs-group> NVIDIA Elements · Navigation
Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.

JS
9.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tabs-group on GitHub Docs for nve-tabs-group
<nve-tabs-item> NVIDIA Elements · Navigation
Represents an individual tab within a tablist, providing a selectable button for switching between content views.

JS
9.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tabs-item on GitHub Docs for nve-tabs-item
<nve-tag> NVIDIA Elements · Feedback
A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.

JS
32.0 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tag on GitHub Docs for nve-tag
<nve-textarea> NVIDIA Elements · Forms
A textarea is a control that enables users to enter and edit text.

JS
32.2 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-textarea on GitHub Docs for nve-textarea
<nve-time> NVIDIA Elements · Data
A time picker is a control that enables users to choose a time value.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-time on GitHub Docs for nve-time
<nve-toast> NVIDIA Elements · Overlays
A contextual popup that displays a status. Toasts are triggered by clicking, focusing, or tapping an element and cannot have interactive elements within them.

JS
37.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-toast on GitHub Docs for nve-toast
<nve-toggletip> NVIDIA Elements · Content
Generic toggletip element for rendering a variety of different interactive content. MDN Popover API

JS
37.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-toggletip on GitHub Docs for nve-toggletip
<nve-toggletip-footer> NVIDIA Elements · Navigation
Provides a designated area at the bottom of a toggletip for actions or supplementary information.

JS
37.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-toggletip-footer on GitHub Docs for nve-toggletip-footer
<nve-toggletip-header> NVIDIA Elements · Navigation
Displays a title or contextual label at the top of a toggletip to categorize its contents.

JS
37.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-toggletip-header on GitHub Docs for nve-toggletip-header
<nve-toolbar> NVIDIA Elements · Navigation
A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.

JS
2.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-toolbar on GitHub Docs for nve-toolbar
<nve-tooltip> NVIDIA Elements · Overlays
A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.

JS
4.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tooltip on GitHub Docs for nve-tooltip
<nve-tree> NVIDIA Elements · Navigation
A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

JS
42.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tree on GitHub Docs for nve-tree
<nve-tree-node> NVIDIA Elements · Navigation
A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

JS
42.6 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-tree-node on GitHub Docs for nve-tree-node
<nve-viewport> NVIDIA Elements · Content
A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.

JS
16.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-viewport on GitHub Docs for nve-viewport
<nve-viewport-gridlines> NVIDIA Elements · Content
Renders origin-stable, zoom-adaptive gridlines behind viewport content.

JS
16.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-viewport-gridlines on GitHub Docs for nve-viewport-gridlines
<nve-viewport-minimap> NVIDIA Elements · Navigation
Provides a simplified overview and direct navigation for its parent viewport.

JS
16.8 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-viewport-minimap on GitHub Docs for nve-viewport-minimap
<nve-week> NVIDIA Elements · Forms
A week picker is a control that enables users to choose a week value.

JS
38.1 kB

CSS
∅

Library
11.8 kB

Popular
2 out of 5

Lit @nvidia-elements/core on npm nve-week on GitHub Docs for nve-week
<oauth-receiver> Mrinmoy Majumdar · Utilities
RapiDoc - Open API spec viewer with built in console

JS
130.0 kB

CSS
∅

Library
∅

Popular
3 out of 5

6d Lit rapidoc on npm oauth-receiver on GitHub Docs for oauth-receiver
<pagefind-search> Zach Leatherman · Utilities
A web component to search with Pagefind.

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/pagefind-search on npm pagefind-search on GitHub Docs for pagefind-search Demo of pagefind-search
<password-rules> Ryan Mulligan · Forms
Checks a password input against a list of rules as the user types.

password-rules on GitHub Docs for password-rules Demo of password-rules
<password-toggle> Ryan Mulligan · Forms
Toggles the visibility of a password input’s value.

password-toggle on GitHub Docs for password-toggle Demo of password-toggle
<pdf-embed> Raymond Camden · Media
Embeds a PDF inline using Adobe’s PDF Embed API, falling back to a regular link if the library doesn’t load.

JS
0.8 kB

CSS
∅

Library
∅

@raymondcamden/pdf-embed on npm pdf-embed on GitHub Docs for pdf-embed
<pdf-viewer> Prerelease Justin Fagnani · Media
A web component for displaying PDFs

Lit pdf-viewer-element on npm pdf-viewer on GitHub Docs for pdf-viewer
<pf-v5-accordion> PatternFly Elements · Layout
Toggle the visibility of sections of content

JS
10.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-accordion on GitHub Docs for pf-v5-accordion
<pf-v5-accordion-header> PatternFly Elements · Layout
Accordion Header

JS
5.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-accordion-header on GitHub Docs for pf-v5-accordion-header
<pf-v5-accordion-panel> PatternFly Elements · Layout
Accordion Panel

JS
1.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-accordion-panel on GitHub Docs for pf-v5-accordion-panel
<pf-v5-alert> PatternFly Elements · Feedback
An **alert** is a notification that provides brief information to the user without blocking their workflow.

JS
14.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-alert on GitHub Docs for pf-v5-alert
<pf-v5-avatar> PatternFly Elements · Media
For displaying a user's avatar image

JS
1.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-avatar on GitHub Docs for pf-v5-avatar
<pf-v5-back-to-top> PatternFly Elements · Content
A shortcut that allows users to quickly navigate to the top of a lengthy content page.

JS
13.0 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-back-to-top on GitHub Docs for pf-v5-back-to-top
<pf-v5-background-image> PatternFly Elements · Media
Allows users to place an image in the background of your page or area of a page.

JS
2.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-background-image on GitHub Docs for pf-v5-background-image
<pf-v5-badge> PatternFly Elements · Feedback
A **badge** is used to annotate other information like a label or an object name.

JS
0.8 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-badge on GitHub Docs for pf-v5-badge
<pf-v5-banner> PatternFly Elements · Feedback
Allows users to display a stylized banner.

JS
4.9 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-banner on GitHub Docs for pf-v5-banner
<pf-v5-button> PatternFly Elements · Actions
Allows users to perform an action when triggered

JS
11.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-button on GitHub Docs for pf-v5-button
<pf-v5-caption> PatternFly Elements · Content
Caption

JS
0.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-caption on GitHub Docs for pf-v5-caption
<pf-v5-card> PatternFly Elements · Layout
Gives a preview of information in a small layout

JS
4.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-card on GitHub Docs for pf-v5-card
<pf-v5-chip> PatternFly Elements · Forms
A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

JS
12.7 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-chip on GitHub Docs for pf-v5-chip
<pf-v5-chip-group> PatternFly Elements · Forms
A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute.

JS
16.3 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-chip-group on GitHub Docs for pf-v5-chip-group
<pf-v5-clipboard-copy> PatternFly Elements · Actions
The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.

JS
24.7 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-clipboard-copy on GitHub Docs for pf-v5-clipboard-copy
<pf-v5-code-block> PatternFly Elements · Content
A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.

JS
2.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-code-block on GitHub Docs for pf-v5-code-block
<pf-v5-dropdown> PatternFly Elements · Overlays
A **dropdown** presents a menu of actions or links in a constrained space that will trigger a process or navigate to a new location.

JS
25.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-dropdown on GitHub Docs for pf-v5-dropdown
<pf-v5-dropdown-group> PatternFly Elements · Overlays
Represents a group of items for a dropdown component.

JS
0.6 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-dropdown-group on GitHub Docs for pf-v5-dropdown-group
<pf-v5-dropdown-item> PatternFly Elements · Overlays
Represents an item for a dropdown component.

JS
3.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-dropdown-item on GitHub Docs for pf-v5-dropdown-item
<pf-v5-dropdown-menu> PatternFly Elements · Overlays
A **dropdown** presents a menu of actions or links in a constrained space that will trigger a process or navigate to a new location.

JS
7.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-dropdown-menu on GitHub Docs for pf-v5-dropdown-menu
<pf-v5-helper-text> PatternFly Elements · Content
Displays contextual feedback for form fields with optional icon and status color.

JS
3.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-helper-text on GitHub Docs for pf-v5-helper-text
<pf-v5-hint> PatternFly Elements · Feedback
Provides inline contextual help or information to users

JS
3.0 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-hint on GitHub Docs for pf-v5-hint
<pf-v5-icon> PatternFly Elements · Media
An **icon** component is a container that allows for icons of varying dimensions to seamlessly replace each other without shifting surrounding content.

JS
2.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-icon on GitHub Docs for pf-v5-icon
<pf-v5-jump-links> PatternFly Elements · Layout
Jump links** allow users to navigate to sections within a page.

JS
9.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-jump-links on GitHub Docs for pf-v5-jump-links
<pf-v5-jump-links-item> PatternFly Elements · Layout
PatternFly Elements

JS
3.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-jump-links-item on GitHub Docs for pf-v5-jump-links-item
<pf-v5-jump-links-list> PatternFly Elements · Data
PatternFly Elements

JS
0.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-jump-links-list on GitHub Docs for pf-v5-jump-links-list
<pf-v5-label> PatternFly Elements · Forms
Allows users to display meta data in a stylized form.

JS
13.9 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-label on GitHub Docs for pf-v5-label
<pf-v5-label-group> PatternFly Elements · Forms
Groups multiple labels with overflow, category, and close support.

JS
17.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-label-group on GitHub Docs for pf-v5-label-group
<pf-v5-modal> PatternFly Elements · Overlays
Displays information or helps a user focus on a task

JS
6.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-modal on GitHub Docs for pf-v5-modal
<pf-v5-option> PatternFly Elements · Forms
Option within a listbox

JS
4.6 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-option on GitHub Docs for pf-v5-option
<pf-v5-option-group> PatternFly Elements · Forms
Group of options within a listbox

JS
3.0 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-option-group on GitHub Docs for pf-v5-option-group
<pf-v5-panel> PatternFly Elements · Layout
The **panel** component is a container that supports flexible content layouts.

JS
2.8 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-panel on GitHub Docs for pf-v5-panel
<pf-v5-popover> PatternFly Elements · Overlays
Toggle the visibility of helpful or contextual information.

JS
21.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-popover on GitHub Docs for pf-v5-popover
<pf-v5-progress> PatternFly Elements · Feedback
Display completion status of ongoing process or task.

JS
13.0 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-progress on GitHub Docs for pf-v5-progress
<pf-v5-progress-step> PatternFly Elements · Feedback
PatternFly Elements

JS
4.9 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-progress-step on GitHub Docs for pf-v5-progress-step
<pf-v5-progress-stepper> PatternFly Elements · Feedback
A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.

JS
9.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-progress-stepper on GitHub Docs for pf-v5-progress-stepper
<pf-v5-search-input> PatternFly Elements · Forms
Allows users to search through a list for specific search terms

JS
22.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-search-input on GitHub Docs for pf-v5-search-input
<pf-v5-select> PatternFly Elements · Forms
A select list enables users to select one or more items from a list.

JS
34.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-select on GitHub Docs for pf-v5-select
<pf-v5-spinner> PatternFly Elements · Feedback
A **spinner** is used to indicate to users that an action is in progress. For actions that may take a long time, use a progress bar instead.

JS
3.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-spinner on GitHub Docs for pf-v5-spinner
<pf-v5-switch> PatternFly Elements · Forms
A **switch** toggles the state of a setting (between on and off).

JS
3.9 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-switch on GitHub Docs for pf-v5-switch
<pf-v5-tab> PatternFly Elements · Navigation
Tab

JS
6.7 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tab on GitHub Docs for pf-v5-tab
<pf-v5-tab-panel> PatternFly Elements · Navigation
PatternFly Elements

JS
1.7 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tab-panel on GitHub Docs for pf-v5-tab-panel
<pf-v5-table> PatternFly Elements · Data
A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.

JS
20.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-table on GitHub Docs for pf-v5-table
<pf-v5-tabs> PatternFly Elements · Navigation
Tabs** allow users to navigate between views within the same page or context.

JS
14.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tabs on GitHub Docs for pf-v5-tabs
<pf-v5-tbody> PatternFly Elements · Data
Table body

JS
0.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tbody on GitHub Docs for pf-v5-tbody
<pf-v5-td> PatternFly Elements · Data
Table data cell

JS
13.2 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-td on GitHub Docs for pf-v5-td
<pf-v5-text-area> PatternFly Elements · Content
A **text area** component is used for entering a paragraph of text that is longer than one line.

JS
7.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-text-area on GitHub Docs for pf-v5-text-area
<pf-v5-text-input> PatternFly Elements · Content
A **text input** is used to gather free-form text from a user.

JS
8.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-text-input on GitHub Docs for pf-v5-text-input
<pf-v5-th> PatternFly Elements · Data
Table header cell

JS
13.6 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-th on GitHub Docs for pf-v5-th
<pf-v5-thead> PatternFly Elements · Data
Table head

JS
2.0 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-thead on GitHub Docs for pf-v5-thead
<pf-v5-tile> PatternFly Elements · Forms
A **tile** component is a form of selection that can be used in place of a radio button and is commonly used in forms.

JS
1.7 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tile on GitHub Docs for pf-v5-tile
<pf-v5-timestamp> PatternFly Elements · Data
A **timestamp** provides consistent formats for displaying date and time values.

JS
1.4 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-timestamp on GitHub Docs for pf-v5-timestamp
<pf-v5-tooltip> PatternFly Elements · Overlays
Toggle the visibility of helpful or contextual information.

JS
9.1 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tooltip on GitHub Docs for pf-v5-tooltip
<pf-v5-tr> PatternFly Elements · Data
Table row

JS
12.5 kB

CSS
∅

Library
6.3 kB

Popular
2 out of 5

5mo Lit @patternfly/elements on npm pf-v5-tr on GitHub Docs for pf-v5-tr
<phantom-ui> Aejkatappaja · Feedback
`<phantom-ui>` -- A structure-aware shimmer skeleton loader.

JS
12.1 kB

CSS
0.2 kB

Library
∅

Popular
2 out of 5

2mo Lit @aejkatappaja/phantom-ui on npm phantom-ui on GitHub Docs for phantom-ui
<pinch-zoom> Google Chrome Labs · Media
Put stuff in an element, now you can pinch-zoom it!

JS
2.8 kB

CSS
0.2 kB

Library
∅

Popular
2 out of 5

pinch-zoom-element on npm pinch-zoom on GitHub Docs for pinch-zoom
<pivot-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm pivot-burger on GitHub Docs for pivot-burger
<place-holder> Noah Liebman · Media
A simple web component that gives you a box with an X through it.

JS
0.5 kB

CSS
∅

Library
∅

@noleli/place-holder on npm place-holder on GitHub Docs for place-holder Demo of place-holder
<place-holder> Raymond Camden · Media
Generates placeholder images of any size without an external service.

place-holder on GitHub Docs for place-holder Demo of place-holder
<play-button> David Darnes · Actions
A Web Component to play audio or video with a button

JS
0.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

@daviddarnes/play-button on npm play-button on GitHub Docs for play-button Demo of play-button
<playground-code-editor> Playground Elements · Content
Serverless coding environments for the web

JS
208.2 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-code-editor on GitHub Docs for playground-code-editor
<playground-file-editor> Playground Elements · Forms
Serverless coding environments for the web

JS
209.8 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-file-editor on GitHub Docs for playground-file-editor
<playground-file-system-controls> Playground Elements · Forms
Serverless coding environments for the web

JS
77.9 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-file-system-controls on GitHub Docs for playground-file-system-controls
<playground-ide> Playground Elements · Content
Serverless coding environments for the web

JS
322.2 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-ide on GitHub Docs for playground-ide
<playground-preview> Playground Elements · Content
Serverless coding environments for the web

JS
29.7 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-preview on GitHub Docs for playground-preview
<playground-project> Playground Elements · Content
Serverless coding environments for the web

JS
16.3 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-project on GitHub Docs for playground-project
<playground-tab-bar> Playground Elements · Navigation
Serverless coding environments for the web

JS
83.8 kB

CSS
∅

Library
6.8 kB

Popular
2 out of 5

Lit playground-elements on npm playground-tab-bar on GitHub Docs for playground-tab-bar
<plucky-underline> Noah Liebman · Effects
An animated standing-wave underline for links.

plucky-underline on GitHub Demo of plucky-underline
<podcast-player> Dave Rupert · Media
An audio player for podcasts.

JS
∅

CSS
∅

Library
∅

Popular
1 out of 5

podcast-player on GitHub
<pop-modal> LeKoala · Overlays
A modern custom element to create dialogs

JS
1.7 kB

CSS
2.4 kB

Library
∅

2y pop-modal-dialog on npm pop-modal on GitHub Docs for pop-modal
<pop-notify> LeKoala · Overlays
A modern custom element to create toast notifications

JS
2.5 kB

CSS
3.5 kB

Library
∅

1y pop-notify on npm pop-notify on GitHub Docs for pop-notify
<ppp-price> Zach Leatherman · Data
Web Component to show Parity Purchasing Power normalized prices.

JS
2.1 kB

CSS
∅

Library
∅

@zachleat/parity-purchasing-power-price on npm ppp-price on GitHub Docs for ppp-price Demo of ppp-price
<print-button> Stefan Matei · Actions
A print button web component that allows users to print specific content.

JS
1.1 kB

CSS
∅

Library
∅

print-button on npm print-button on GitHub Docs for print-button Demo of print-button
<progressive-image> André Ruffert · Media
A progressive image element

JS
1.0 kB

CSS
0.1 kB

Library
∅

1y progressive-image-element on npm progressive-image on GitHub Docs for progressive-image
<pull-to-refresh> Aaron Gustafson · Utilities
Web component that enables pull-to-refresh functionality.

JS
3.5 kB

CSS
∅

Library
∅

@aarongustafson/pull-to-refresh on npm pull-to-refresh on GitHub Docs for pull-to-refresh Demo of pull-to-refresh
<pwa-install> Gleb Khmyznikov · Overlays
PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.

JS
46.2 kB

CSS
∅

Library
∅

Popular
3 out of 5

Lit @khmyznikov/pwa-install on npm pwa-install on GitHub Docs for pwa-install Demo of pwa-install
<pwa-install> PWABuilder · Utilities
!CI

JS
11.4 kB

CSS
1.8 kB

Library
∅

Popular
4 out of 5

Lit @pwabuilder/pwainstall on npm
<qr-code> bitjson · Media
QR Code Web Component

JS
∅

CSS
∅

Library
∅

Popular
2 out of 5

Stencil @bitjson/qr-code on npm qr-code on GitHub Docs for qr-code
<qr-code> Eduard Castellano · Media
Web Component for generating QR codes

JS
5.1 kB

CSS
∅

Library
∅

Popular
2 out of 5

3mo webcomponent-qr-code on npm qr-code on GitHub Docs for qr-code Demo of qr-code
<qr-component> Raymond Camden · Media
Progressively enhances a page with a QR code for its URL.

Docs for qr-component Demo of qr-component
<quark-icon-arrow-down> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-arrow-down on GitHub Docs for quark-icon-arrow-down
<quark-icon-arrow-left> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-arrow-left on GitHub Docs for quark-icon-arrow-left
<quark-icon-arrow-right> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-arrow-right on GitHub Docs for quark-icon-arrow-right
<quark-icon-camera-fill> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-camera-fill on GitHub Docs for quark-icon-camera-fill
<quark-icon-close> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-close on GitHub Docs for quark-icon-close
<quark-icon-close-o> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-close-o on GitHub Docs for quark-icon-close-o
<quark-icon-notify> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-notify on GitHub Docs for quark-icon-notify
<quark-icon-search> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-search on GitHub Docs for quark-icon-search
<quark-icon-star-fill> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-star-fill on GitHub Docs for quark-icon-star-fill
<quark-icon-success> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-success on GitHub Docs for quark-icon-success
<quark-icon-whiteerror-o> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-whiteerror-o on GitHub Docs for quark-icon-whiteerror-o
<quark-icon-whitesuccess-o> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-whitesuccess-o on GitHub Docs for quark-icon-whitesuccess-o
<quark-icon-whitewarning-o> Quarkd · Media
Mobile UI Components built on Web Components.

JS
110.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

10mo quarkd on npm quark-icon-whitewarning-o on GitHub Docs for quark-icon-whitewarning-o
<random-source> David Darnes · Effects
A Web Component to randomly change audio or video sources

JS
0.3 kB

CSS
∅

Library
∅

@daviddarnes/random-source on npm random-source on GitHub Docs for random-source Demo of random-source
<range-slider> André Ruffert · Forms
A cross browser customizable and accessible <range-slider> web component

JS
2.2 kB

CSS
0.5 kB

Library
∅

Popular
3 out of 5

range-slider-element on npm range-slider on GitHub Docs for range-slider
<rapi-doc> Mrinmoy Majumdar · Content
RapiDoc - Open API spec viewer with built in console

JS
130.0 kB

CSS
∅

Library
∅

Popular
3 out of 5

6d Lit rapidoc on npm rapi-doc on GitHub Docs for rapi-doc
<rapi-doc-mini> Mrinmoy Majumdar · Content
RapiDoc - Open API spec viewer with built in console

JS
130.0 kB

CSS
∅

Library
∅

Popular
3 out of 5

6d Lit rapidoc on npm rapi-doc-mini on GitHub Docs for rapi-doc-mini
<relative-time> GitHub · Data
Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.

JS
6.2 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/relative-time-element on npm relative-time on GitHub Docs for relative-time
<remote-input> GitHub · Forms
An input element that sends its value to a server endpoint and renders the response body.

JS
1.0 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/remote-input-element on npm remote-input on GitHub Docs for remote-input
<resize-asaurus> Zach Leatherman · Layout
A web component to add resizing behavior to test intrinsically sized responsive components.

JS
1.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/resizeasaurus on npm resize-asaurus on GitHub Docs for resize-asaurus Demo of resize-asaurus
<reveal-preso> Raymond Camden · Content
Builds a Reveal.js slide presentation from simple markup.

Docs for reveal-preso Demo of reveal-preso
<rgb-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses RGB object format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm rgb-color-picker on GitHub Docs for rgb-color-picker
<rgb-string-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses RGB string format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm rgb-string-color-picker on GitHub Docs for rgb-string-color-picker
<rgba-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses RGBA object format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm rgba-color-picker on GitHub Docs for rgba-color-picker
<rgba-string-color-picker> Serhii Kulykov · Forms
A color picker custom element that uses RGBA string format.

JS
2.8 kB

CSS
∅

Library
∅

Popular
4 out of 5

vanilla-colorful on npm rgba-string-color-picker on GitHub Docs for rgba-string-color-picker
<rich-text> LeKoala · Content
Opinionated, progressive rich-text editor built on Squire

JS
17.6 kB

CSS
3.7 kB

Library
∅

11d @lekoala/rich-text on npm rich-text on GitHub Docs for rich-text
<rotate-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm rotate-burger on GitHub Docs for rotate-burger
<roving-tabindex> Jake Lazaroff · Navigation
A simple HTML web component that implements the roving tabindex pattern for building accessible menus and grids.

JS
1.4 kB

CSS
1.2 kB

Library
∅

Popular
1 out of 5

roving-tabindex on npm roving-tabindex on GitHub Docs for roving-tabindex
<sample-input> David Darnes · Forms
A Web Component to sample audio or video added to an upload input

JS
0.3 kB

CSS
∅

Library
∅

@daviddarnes/sample-input on npm sample-input on GitHub Docs for sample-input Demo of sample-input
<sco-pe> LeKoala · Navigation
Scoped navigation custom element, progressively enhances links and forms in server-rendered apps

JS
10.8 kB

CSS
∅

Library
∅

12d @lekoala/sco-pe on npm
<scroll-shadow> Ingmar Hergst · Layout
A small web component to enhance scrollable elements with dynamic scroll indicators.

JS
0.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

scroll-shadow-element on npm scroll-shadow on GitHub Docs for scroll-shadow
<scrollspy-nav> Ryan Mulligan · Navigation
Sticky page anchor navigation that highlights the section in view.

JS
∅

CSS
∅

Library
∅

Popular
1 out of 5

scrollspy-nav on GitHub Docs for scrollspy-nav Demo of scrollspy-nav
<scrolly-rail> Ryan Mulligan · Layout
Horizontal snap scroller styles and previous/next control enhancements

JS
0.9 kB

CSS
0.1 kB

Library
∅

@hexagoncircle/scrolly-rail on npm scrolly-rail on GitHub Docs for scrolly-rail Demo of scrolly-rail
<seven-minute-tabs> Zach Leatherman · Navigation
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.

JS
1.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/seven-minute-tabs on npm seven-minute-tabs on GitHub Docs for seven-minute-tabs Demo of seven-minute-tabs
<share-button> David Darnes · Actions
A Web Component to share web pages using the native OS sharing options

JS
0.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

@daviddarnes/share-button on npm share-button on GitHub Docs for share-button Demo of share-button
<show-password-toggle> sunnywalker · Forms
Adds show/hide functionality to password fields.

show-password-toggle on GitHub
~~<sl-alert>~~ Archived Shoelace · Feedback
Alerts are used to display important messages inline or as toast notifications.
Superseded by <wa-callout>

JS
9.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-alert on GitHub Docs for sl-alert
~~<sl-animated-image>~~ Archived Shoelace · Effects
A component for displaying animated GIFs and WEBPs that play and pause on interaction.
Superseded by <wa-animated-image>

JS
4.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-animated-image on GitHub Docs for sl-animated-image
~~<sl-animation>~~ Archived Shoelace · Effects
Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the Web Animations API.
Superseded by <wa-animation>

JS
4.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-animation on GitHub Docs for sl-animation
~~<sl-avatar>~~ Archived Shoelace · Media
Avatars are used to represent a person or object.
Superseded by <wa-avatar>

JS
5.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-avatar on GitHub Docs for sl-avatar
~~<sl-badge>~~ Archived Shoelace · Feedback
Badges are used to draw attention and display statuses or counts.
Superseded by <wa-badge>

JS
1.6 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-badge on GitHub Docs for sl-badge
~~<sl-breadcrumb>~~ Archived Shoelace · Navigation
Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
Superseded by <wa-breadcrumb>

JS
5.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-breadcrumb on GitHub Docs for sl-breadcrumb
~~<sl-breadcrumb-item>~~ Archived Shoelace · Navigation
Breadcrumb Items are used inside breadcrumbs to represent different links.
Superseded by <wa-breadcrumb-item>

JS
2.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-breadcrumb-item on GitHub Docs for sl-breadcrumb-item
~~<sl-button>~~ Archived Shoelace · Actions
Buttons represent actions that are available to the user.
Superseded by <wa-button>

JS
11.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-button on GitHub Docs for sl-button
~~<sl-button-group>~~ Archived Shoelace · Actions
Button groups can be used to group related buttons into sections.
Superseded by <wa-button-group>

JS
0.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-button-group on GitHub Docs for sl-button-group
~~<sl-card>~~ Archived Shoelace · Layout
Cards can be used to group related subjects in a container.
Superseded by <wa-card>

JS
1.8 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-card on GitHub Docs for sl-card
~~<sl-carousel>~~ Archived Shoelace · Media
Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
Superseded by <wa-carousel>

JS
10.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-carousel on GitHub Docs for sl-carousel
~~<sl-carousel-item>~~ Archived Shoelace · Media
A carousel item represent a slide within a carousel.
Superseded by <wa-carousel-item>

JS
0.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-carousel-item on GitHub Docs for sl-carousel-item
~~<sl-checkbox>~~ Archived Shoelace · Forms
Checkboxes allow the user to toggle an option on or off.
Superseded by <wa-checkbox>

JS
8.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-checkbox on GitHub Docs for sl-checkbox
~~<sl-color-picker>~~ Archived Shoelace · Forms
Color pickers allow the user to select a color.
Superseded by <wa-color-picker>

JS
40.0 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-color-picker on GitHub Docs for sl-color-picker
~~<sl-copy-button>~~ Archived Shoelace · Actions
Copies text data to the clipboard when the user clicks the trigger.
Superseded by <wa-copy-button>

JS
18.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-copy-button on GitHub Docs for sl-copy-button
~~<sl-details>~~ Archived Shoelace · Layout
Details show a brief summary and expand to show additional content.
Superseded by <wa-details>

JS
7.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-details on GitHub Docs for sl-details
~~<sl-dialog>~~ Archived Shoelace · Overlays
Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
Superseded by <wa-dialog>

JS
11.2 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-dialog on GitHub Docs for sl-dialog
~~<sl-divider>~~ Archived Shoelace · Layout
Dividers are used to visually separate or group elements.
Superseded by <wa-divider>

JS
0.8 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-divider on GitHub Docs for sl-divider
~~<sl-drawer>~~ Archived Shoelace · Overlays
Drawers slide in from a container to expose additional options and information.
Superseded by <wa-drawer>

JS
11.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-drawer on GitHub Docs for sl-drawer
~~<sl-dropdown>~~ Archived Shoelace · Overlays
Dropdowns expose additional content that "drops down" in a panel.
Superseded by <wa-dropdown>

JS
14.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-dropdown on GitHub Docs for sl-dropdown
~~<sl-format-bytes>~~ Archived Shoelace · Data
Formats a number as a human readable bytes value.
Superseded by <wa-format-bytes>

JS
1.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-format-bytes on GitHub Docs for sl-format-bytes
~~<sl-format-date>~~ Archived Shoelace · Data
Formats a date/time using the specified locale and options.
Superseded by <wa-format-date>

JS
1.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-format-date on GitHub Docs for sl-format-date
~~<sl-format-number>~~ Archived Shoelace · Data
Formats a number using the specified locale and options.
Superseded by <wa-format-number>

JS
1.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-format-number on GitHub Docs for sl-format-number
~~<sl-icon>~~ Archived Shoelace · Media
Icons are symbols that can be used to represent various options within an application.
Superseded by <wa-icon>

JS
4.0 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-icon on GitHub Docs for sl-icon
~~<sl-icon-button>~~ Archived Shoelace · Media
Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
Superseded by <wa-button>

JS
5.8 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-icon-button on GitHub Docs for sl-icon-button
~~<sl-image-comparer>~~ Archived Shoelace · Media
Compare visual differences between similar photos with a sliding panel.
Superseded by <wa-comparison>

JS
7.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-image-comparer on GitHub Docs for sl-image-comparer
~~<sl-include>~~ Archived Shoelace · Content
Includes give you the power to embed external HTML files into the page.
Superseded by <wa-include>

JS
0.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-include on GitHub Docs for sl-include
~~<sl-input>~~ Archived Shoelace · Forms
Inputs collect data from the user.
Superseded by <wa-input>

JS
11.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-input on GitHub Docs for sl-input
~~<sl-menu>~~ Archived Shoelace · Navigation
Menus provide a list of options for the user to choose from.
Superseded by <wa-dropdown>

JS
1.2 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-menu on GitHub Docs for sl-menu
~~<sl-menu-item>~~ Archived Shoelace · Navigation
Menu items provide options for the user to pick from in a menu.
Superseded by <wa-dropdown-item>

JS
19.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-menu-item on GitHub Docs for sl-menu-item
~~<sl-menu-label>~~ Archived Shoelace · Navigation
Menu labels are used to describe a group of menu items.

JS
0.4 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-menu-label on GitHub Docs for sl-menu-label
~~<sl-mutation-observer>~~ Archived Shoelace · Utilities
The Mutation Observer component offers a thin, declarative interface to the `MutationObserver API`.
Superseded by <wa-mutation-observer>

JS
1.0 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-mutation-observer on GitHub Docs for sl-mutation-observer
~~<sl-option>~~ Archived Shoelace · Forms
Options define the selectable items within various form controls such as select.
Superseded by <wa-option>

JS
6.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-option on GitHub Docs for sl-option
~~<sl-popup>~~ Archived Shoelace · Overlays
Popup is a utility that lets you declaratively anchor "popup" containers to another element.
Superseded by <wa-popup>

JS
11.6 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-popup on GitHub Docs for sl-popup
~~<sl-progress-bar>~~ Archived Shoelace · Feedback
Progress bars are used to show the status of an ongoing operation.
Superseded by <wa-progress-bar>

JS
3.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-progress-bar on GitHub Docs for sl-progress-bar
~~<sl-progress-ring>~~ Archived Shoelace · Feedback
Progress rings are used to show the progress of a determinate operation in a circular fashion.
Superseded by <wa-progress-ring>

JS
2.4 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-progress-ring on GitHub Docs for sl-progress-ring
~~<sl-qr-code>~~ Archived Shoelace · Media
Generates a QR code and renders it using the Canvas API.
Superseded by <wa-qr-code>

JS
6.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-qr-code on GitHub Docs for sl-qr-code
~~<sl-radio>~~ Archived Shoelace · Forms
Radios allow the user to select a single option from a group.
Superseded by <wa-radio>

JS
5.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-radio on GitHub Docs for sl-radio
~~<sl-radio-button>~~ Archived Shoelace · Forms
Radios buttons allow the user to select a single option from a group using a button-like control.
Superseded by <wa-radio>

JS
5.0 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-radio-button on GitHub Docs for sl-radio-button
~~<sl-radio-group>~~ Archived Shoelace · Forms
Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
Superseded by <wa-radio-group>

JS
5.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-radio-group on GitHub Docs for sl-radio-group
~~<sl-range>~~ Archived Shoelace · Forms
Ranges allow the user to select a single value within a given range using a slider.
Superseded by <wa-slider>

JS
7.4 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-range on GitHub Docs for sl-range
~~<sl-rating>~~ Archived Shoelace · Forms
Ratings give users a way to quickly view and provide feedback.
Superseded by <wa-rating>

JS
8.0 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-rating on GitHub Docs for sl-rating
~~<sl-relative-time>~~ Archived Shoelace · Data
Outputs a localized time phrase relative to the current date and time.
Superseded by <wa-relative-time>

JS
1.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-relative-time on GitHub Docs for sl-relative-time
~~<sl-resize-observer>~~ Archived Shoelace · Layout
The Resize Observer component offers a thin, declarative interface to the `ResizeObserver API`.
Superseded by <wa-resize-observer>

JS
0.8 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-resize-observer on GitHub Docs for sl-resize-observer
~~<sl-select>~~ Archived Shoelace · Forms
Selects allow you to choose items from a menu of predefined options.
Superseded by <wa-select>

JS
25.3 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-select on GitHub Docs for sl-select
~~<sl-skeleton>~~ Archived Shoelace · Feedback
Skeletons are used to provide a visual representation of where content will eventually be drawn.
Superseded by <wa-skeleton>

JS
1.4 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-skeleton on GitHub Docs for sl-skeleton
~~<sl-spinner>~~ Archived Shoelace · Feedback
Spinners are used to show the progress of an indeterminate operation.
Superseded by <wa-spinner>

JS
1.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-spinner on GitHub Docs for sl-spinner
~~<sl-split-panel>~~ Archived Shoelace · Layout
Split panels display two adjacent panels, allowing the user to reposition them.
Superseded by <wa-split-panel>

JS
4.1 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-split-panel on GitHub Docs for sl-split-panel
~~<sl-switch>~~ Archived Shoelace · Forms
Switches allow the user to toggle an option on or off.
Superseded by <wa-switch>

JS
5.5 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-switch on GitHub Docs for sl-switch
~~<sl-tab>~~ Archived Shoelace · Navigation
Tabs are used inside tab groups to represent and activate tab panels.
Superseded by <wa-tab>

JS
7.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tab on GitHub Docs for sl-tab
~~<sl-tab-group>~~ Archived Shoelace · Navigation
Tab groups organize content into a container that shows one section at a time.
Superseded by <wa-tab-group>

JS
10.9 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tab-group on GitHub Docs for sl-tab-group
~~<sl-tab-panel>~~ Archived Shoelace · Navigation
Tab panels are used inside tab groups to display tabbed content.
Superseded by <wa-tab-panel>

JS
1.4 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tab-panel on GitHub Docs for sl-tab-panel
~~<sl-tag>~~ Archived Shoelace · Feedback
Tags are used as labels to organize things or to indicate a selection.
Superseded by <wa-tag>

JS
7.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tag on GitHub Docs for sl-tag
~~<sl-textarea>~~ Archived Shoelace · Forms
Textareas collect data from the user and allow multiple lines of text.
Superseded by <wa-textarea>

JS
6.2 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-textarea on GitHub Docs for sl-textarea
~~<sl-tooltip>~~ Archived Shoelace · Overlays
Tooltips display additional information based on a specific action.
Superseded by <wa-tooltip>

JS
13.6 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tooltip on GitHub Docs for sl-tooltip
~~<sl-tree>~~ Archived Shoelace · Navigation
Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.
Superseded by <wa-tree>

JS
14.7 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tree on GitHub Docs for sl-tree
~~<sl-tree-item>~~ Archived Shoelace · Navigation
A tree item serves as a hierarchical node that lives inside a tree.
Superseded by <wa-tree-item>

JS
12.8 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-tree-item on GitHub Docs for sl-tree-item
~~<sl-visually-hidden>~~ Archived Shoelace · Utilities
The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.

JS
0.4 kB

CSS
∅

Library
7.9 kB

Lit @shoelace-style/shoelace on npm sl-visually-hidden on GitHub Docs for sl-visually-hidden
<slant-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm slant-burger on GitHub Docs for slant-burger
<slide-deck> OddBird · Content
A Web Component for web presentations

JS
4.0 kB

CSS
0.8 kB

Library
∅

Popular
1 out of 5

@oddbird/slide-deck on npm slide-deck on GitHub Docs for slide-deck Demo of slide-deck
<slide-show> Raymond Camden · Media
Displays one image at a time from a list, with controls to move between them.

slide-show on GitHub Docs for slide-show Demo of slide-show
<slide-show> Stephen Band · Layout
The accessible, scrollable, styleable, horizontal carousel custom element. No dependencies, about 12kB minified and gzipped.

JS
12.2 kB

CSS
2.1 kB

Library
∅

@stephband/slide-show on npm slide-show on GitHub Docs for slide-show
<sling-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm sling-burger on GitHub Docs for sling-burger
<slot-picker> LeKoala · Forms
Native-first day and appointment slot picker primitive

JS
0.3 kB

CSS
7.0 kB

Library
∅

18d @lekoala/slot-picker on npm slot-picker on GitHub Docs for slot-picker
<snow-fall> Zach Leatherman · Effects
A web component to add snow to your web site (or to an element on your web site).

JS
1.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/snow-fall on npm snow-fall on GitHub Docs for snow-fall Demo of snow-fall
<solar-eclipse-toggle> Zach Leatherman · Effects
An accessible light/dark theme toggle button that follows your system preference by default.

JS
1.3 kB

CSS
1.1 kB

Library
∅

Popular
1 out of 5

@zachleat/solar-eclipse-toggle on npm solar-eclipse-toggle on GitHub Docs for solar-eclipse-toggle Demo of solar-eclipse-toggle
<sp-accordion> Spectrum Web Components · Layout
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.

JS
3.6 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/accordion on npm sp-accordion on GitHub Docs for sp-accordion
<sp-accordion-item> Spectrum Web Components · Layout
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.

JS
9.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/accordion on npm sp-accordion-item on GitHub Docs for sp-accordion-item
<sp-action-bar> Spectrum Web Components · Navigation
A `<sp-action-bar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode.

JS
34.5 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/action-bar on npm sp-action-bar on GitHub Docs for sp-action-bar
<sp-action-button> Spectrum Web Components · Actions
An `<sp-action-button>` represents an action a user can take.

JS
24.4 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/action-button on npm sp-action-button on GitHub Docs for sp-action-button
<sp-action-group> Spectrum Web Components · Layout
`sp-action-group` delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

JS
28.8 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/action-group on npm sp-action-group on GitHub Docs for sp-action-group
<sp-action-menu> Spectrum Web Components · Navigation
An `<sp-action-menu>` is an action button with an attached menu of options. Unlike a standard picker, it does not maintain a selection by default and displays a "more" icon instead of a chevron.

JS
83.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/action-menu on npm sp-action-menu on GitHub Docs for sp-action-menu
<sp-alert-banner> Spectrum Web Components · Feedback
Web component implementation of a Spectrum design AlertBanner

JS
14.6 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/alert-banner on npm sp-alert-banner on GitHub Docs for sp-alert-banner
<sp-asset> Spectrum Web Components · Forms
Use an `<sp-asset>` element to visually represent a file, folder or image in your application.

JS
1.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/asset on npm sp-asset on GitHub Docs for sp-asset
<sp-avatar> Spectrum Web Components · Media
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.

JS
7.2 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/avatar on npm sp-avatar on GitHub Docs for sp-avatar
<sp-badge> Spectrum Web Components · Feedback
Web component implementation of a Spectrum design Badge

JS
3.6 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/badge on npm sp-badge on GitHub Docs for sp-badge
<sp-breadcrumb-item> Spectrum Web Components · Navigation
Web component implementation of a Spectrum design Breadcrumbs

JS
10.0 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

10d @spectrum-web-components/breadcrumbs on npm sp-breadcrumb-item on GitHub Docs for sp-breadcrumb-item
<sp-breadcrumbs> Spectrum Web Components · Navigation
Web component implementation of a Spectrum design Breadcrumbs

JS
88.0 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

10d @spectrum-web-components/breadcrumbs on npm sp-breadcrumbs on GitHub Docs for sp-breadcrumbs
<sp-button> Spectrum Web Components · Actions
An `<sp-button>` represents an action a user can take.

JS
16.1 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/button on npm sp-button on GitHub Docs for sp-button
<sp-button-group> Spectrum Web Components · Actions
`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

JS
0.9 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/button-group on npm sp-button-group on GitHub Docs for sp-button-group
<sp-card> Spectrum Web Components · Layout
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.

JS
19.1 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/card on npm sp-card on GitHub Docs for sp-card
<sp-checkbox> Spectrum Web Components · Forms
`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

JS
9.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/checkbox on npm sp-checkbox on GitHub Docs for sp-checkbox
<sp-clear-button> Spectrum Web Components · Actions
An `<sp-button>` represents an action a user can take.

JS
11.2 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/button on npm sp-clear-button on GitHub Docs for sp-clear-button
<sp-close-button> Spectrum Web Components · Actions
An `<sp-button>` represents an action a user can take.

JS
11.9 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/button on npm sp-close-button on GitHub Docs for sp-close-button
<sp-coach-indicator> Spectrum Web Components · Feedback
`<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.

JS
1.3 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/coachmark on npm sp-coach-indicator on GitHub Docs for sp-coach-indicator
<sp-coachmark> Spectrum Web Components · Feedback
`<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.

JS
23.8 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/coachmark on npm sp-coachmark on GitHub Docs for sp-coachmark
<sp-color-area> Spectrum Web Components · Layout
An `<sp-color-area>` allows users to visually select two properties of a color simultaneously.

JS
33.8 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/color-area on npm sp-color-area on GitHub Docs for sp-color-area
<sp-color-field> Spectrum Web Components · Forms
Web component implementation of a Spectrum design ColorField

JS
70.7 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/color-field on npm sp-color-field on GitHub Docs for sp-color-field
<sp-color-handle> Spectrum Web Components · Forms
The `<sp-color-handle>` is used to select a color on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`.

JS
2.8 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/color-handle on npm sp-color-handle on GitHub Docs for sp-color-handle
<sp-color-loupe> Spectrum Web Components · Forms
An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

JS
1.8 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/color-loupe on npm sp-color-loupe on GitHub Docs for sp-color-loupe
<sp-color-slider> Spectrum Web Components · Forms
An `<sp-color-slider>` lets users visually change an individual channel of a color.

JS
35.5 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/color-slider on npm sp-color-slider on GitHub Docs for sp-color-slider
<sp-color-wheel> Spectrum Web Components · Forms
An `<sp-color-wheel>` allows users to visually select the hue of a color on a circular track.

JS
35.9 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/color-wheel on npm sp-color-wheel on GitHub Docs for sp-color-wheel
<sp-combobox> Spectrum Web Components · Forms
Web component implementation of a Spectrum design Combobox

JS
74.4 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

10d @spectrum-web-components/combobox on npm sp-combobox on GitHub Docs for sp-combobox
<sp-contextual-help> Spectrum Web Components · Overlays
Spectrum Contextual help provides additional information about the state of either an adjacent component or an entire view.

JS
63.8 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/contextual-help on npm sp-contextual-help on GitHub Docs for sp-contextual-help
<sp-dialog> Spectrum Web Components · Overlays
`sp-dialog` displays important information that users need to acknowledge.

JS
26.4 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/dialog on npm sp-dialog on GitHub Docs for sp-dialog
<sp-dialog-base> Spectrum Web Components · Overlays
`sp-dialog` displays important information that users need to acknowledge.

JS
28.4 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/dialog on npm sp-dialog-base on GitHub Docs for sp-dialog-base
<sp-dialog-wrapper> Spectrum Web Components · Overlays
`sp-dialog` displays important information that users need to acknowledge.

JS
28.7 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/dialog on npm sp-dialog-wrapper on GitHub Docs for sp-dialog-wrapper
<sp-divider> Spectrum Web Components · Layout
`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.

JS
1.0 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/divider on npm sp-divider on GitHub Docs for sp-divider
<sp-dropzone> Spectrum Web Components · Layout
A `<sp-dropzone>` is an area on the screen into which an object can be dragged and dropped to accomplish a task.

JS
2.0 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

1mo @spectrum-web-components/dropzone on npm sp-dropzone on GitHub Docs for sp-dropzone
<sp-field-label> Spectrum Web Components · Forms
An `<sp-field-label>` provides accessible labelling for form elements.

JS
7.7 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/field-label on npm sp-field-label on GitHub Docs for sp-field-label
<sp-help-text> Spectrum Web Components · Content
Web component implementation of a Spectrum design HelpText

JS
6.9 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/help-text on npm sp-help-text on GitHub Docs for sp-help-text
<sp-icon> Spectrum Web Components · Media
`<sp-icon>` renders an icon to the page.

JS
4.9 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/icon on npm sp-icon on GitHub Docs for sp-icon
<sp-illustrated-message> Spectrum Web Components · Feedback
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.

JS
4.0 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/illustrated-message on npm sp-illustrated-message on GitHub Docs for sp-illustrated-message
<sp-link> Spectrum Web Components · Navigation
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.

JS
6.8 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/link on npm sp-link on GitHub Docs for sp-link
<sp-menu> Spectrum Web Components · Navigation
Spectrum Menu Component

JS
51.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/menu on npm sp-menu on GitHub Docs for sp-menu
<sp-menu-divider> Spectrum Web Components · Navigation
An `<sp-menu>` is used for creating a menu list.

JS
1.1 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/menu on npm sp-menu-divider on GitHub Docs for sp-menu-divider
<sp-menu-group> Spectrum Web Components · Navigation
An `<sp-menu>` is used for creating a menu list.

JS
52.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/menu on npm sp-menu-group on GitHub Docs for sp-menu-group
<sp-menu-item> Spectrum Web Components · Navigation
An `<sp-menu>` is used for creating a menu list.

JS
42.2 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/menu on npm sp-menu-item on GitHub Docs for sp-menu-item
<sp-meter> Spectrum Web Components · Feedback
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.

JS
10.8 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/meter on npm sp-meter on GitHub Docs for sp-meter
<sp-number-field> Spectrum Web Components · Data
Web component implementation of a Spectrum design NumberField

JS
57.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/number-field on npm sp-number-field on GitHub Docs for sp-number-field
<sp-picker> Spectrum Web Components · Forms
An `<sp-picker>` is a dropdown selection component that allows users to choose a single option from a list of menu items.

JS
66.6 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/picker on npm sp-picker on GitHub Docs for sp-picker
<sp-picker-button> Spectrum Web Components · Forms
Web component implementation of a Spectrum design PickerButton

JS
11.7 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/picker-button on npm sp-picker-button on GitHub Docs for sp-picker-button
<sp-popover> Spectrum Web Components · Overlays
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

JS
2.3 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/popover on npm sp-popover on GitHub Docs for sp-popover
<sp-progress-bar> Spectrum Web Components · Feedback
An `<sp-progress-bar>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.

JS
10.6 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1mo @spectrum-web-components/progress-bar on npm sp-progress-bar on GitHub Docs for sp-progress-bar
<sp-progress-circle> Spectrum Web Components · Feedback
An `<sp-progress-circle>` shows the progression of a system operation such as downloading, uploading, processing, etc.

JS
6.7 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/progress-circle on npm sp-progress-circle on GitHub Docs for sp-progress-circle
<sp-radio> Spectrum Web Components · Forms
`<sp-radio>` and `<sp-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.

JS
4.2 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/radio on npm sp-radio on GitHub Docs for sp-radio
<sp-radio-group> Spectrum Web Components · Forms
`<sp-radio>` and `<sp-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.

JS
10.9 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/radio on npm sp-radio-group on GitHub Docs for sp-radio-group
<sp-search> Spectrum Web Components · Forms
The `<sp-search>` element is used for searching and filtering items.

JS
49.9 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/search on npm sp-search on GitHub Docs for sp-search
<sp-sidenav> Spectrum Web Components · Navigation
Side navigation allows users to locate information and features within the UI.

JS
12.0 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/sidenav on npm sp-sidenav on GitHub Docs for sp-sidenav
<sp-sidenav-heading> Spectrum Web Components · Content
Side navigation allows users to locate information and features within the UI.

JS
2.6 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/sidenav on npm sp-sidenav-heading on GitHub Docs for sp-sidenav-heading
<sp-sidenav-item> Spectrum Web Components · Layout
Side navigation allows users to locate information and features within the UI.

JS
8.8 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/sidenav on npm sp-sidenav-item on GitHub Docs for sp-sidenav-item
<sp-slider> Spectrum Web Components · Forms
`<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.

JS
70.2 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/slider on npm sp-slider on GitHub Docs for sp-slider
<sp-slider-handle> Spectrum Web Components · Forms
`<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.

JS
5.0 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/slider on npm sp-slider-handle on GitHub Docs for sp-slider-handle
<sp-status-light> Spectrum Web Components · Feedback
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.

JS
2.1 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/status-light on npm sp-status-light on GitHub Docs for sp-status-light
<sp-swatch> Spectrum Web Components · Forms
Web component implementation of a Spectrum design Swatch

JS
11.8 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

10d @spectrum-web-components/swatch on npm sp-swatch on GitHub Docs for sp-swatch
<sp-swatch-group> Spectrum Web Components · Layout
Web component implementation of a Spectrum design Swatch

JS
3.9 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

10d @spectrum-web-components/swatch on npm sp-swatch-group on GitHub Docs for sp-swatch-group
<sp-switch> Spectrum Web Components · Forms
An `<sp-switch>` is used to turn an option on or off.

JS
9.0 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/switch on npm sp-switch on GitHub Docs for sp-switch
<sp-tab> Spectrum Web Components · Navigation
The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`.

JS
4.3 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/tabs on npm sp-tab on GitHub Docs for sp-tab
<sp-tab-panel> Spectrum Web Components · Navigation
The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`.

JS
0.7 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/tabs on npm sp-tab-panel on GitHub Docs for sp-tab-panel
<sp-table> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
24.2 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table on GitHub Docs for sp-table
<sp-table-body> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
1.1 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table-body on GitHub Docs for sp-table-body
<sp-table-cell> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
1.0 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table-cell on GitHub Docs for sp-table-cell
<sp-table-checkbox-cell> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
10.5 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table-checkbox-cell on GitHub Docs for sp-table-checkbox-cell
<sp-table-head> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
0.6 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table-head on GitHub Docs for sp-table-head
<sp-table-head-cell> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
7.0 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table-head-cell on GitHub Docs for sp-table-head-cell
<sp-table-row> Spectrum Web Components · Data
Web component implementation of a Spectrum design Table

JS
2.4 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

1y @spectrum-web-components/table on npm sp-table-row on GitHub Docs for sp-table-row
<sp-tabs> Spectrum Web Components · Navigation
The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`.

JS
12.3 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/tabs on npm sp-tabs on GitHub Docs for sp-tabs
<sp-tabs-overflow> Spectrum Web Components · Navigation
The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`.

JS
26.7 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/tabs on npm sp-tabs-overflow on GitHub Docs for sp-tabs-overflow
<sp-textfield> Spectrum Web Components · Content
`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.

JS
43.5 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/textfield on npm sp-textfield on GitHub Docs for sp-textfield
<sp-thumbnail> Spectrum Web Components · Media
An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect.

JS
1.9 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/thumbnail on npm sp-thumbnail on GitHub Docs for sp-thumbnail
<sp-tooltip> Spectrum Web Components · Overlays
`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them.

JS
34.2 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

3mo @spectrum-web-components/tooltip on npm sp-tooltip on GitHub Docs for sp-tooltip
<sp-tooltip-openable> Spectrum Web Components · Overlays
`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them.

JS
34.2 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

10d @spectrum-web-components/tooltip on npm sp-tooltip-openable on GitHub Docs for sp-tooltip-openable
<sp-top-nav> Spectrum Web Components · Navigation
`<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.

JS
12.9 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/top-nav on npm sp-top-nav on GitHub Docs for sp-top-nav
<sp-top-nav-item> Spectrum Web Components · Navigation
`<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.

JS
7.6 kB

CSS
∅

Library
7.5 kB

Popular
2 out of 5

4mo @spectrum-web-components/top-nav on npm sp-top-nav-item on GitHub Docs for sp-top-nav-item
<sp-tray> Spectrum Web Components · Overlays
Web component implementation of a Spectrum design Tray

JS
3.3 kB

CSS
∅

Library
7.5 kB

Popular
3 out of 5

4mo @spectrum-web-components/tray on npm sp-tray on GitHub Docs for sp-tray
<spacer-gif> Erik Kroes · Layout
The most transparent way of adding space to your web page.

JS
0.4 kB

CSS
∅

Library
∅

Popular
1 out of 5

@erikkroes/spacer-gif on npm spacer-gif on GitHub Docs for spacer-gif
<speedlify-score> Zach Leatherman · Feedback
A web component to show Lighthouse scores via Speedlify

JS
1.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

speedlify-score on npm speedlify-score on GitHub Docs for speedlify-score Demo of speedlify-score
<speedlify2-score> Zach Leatherman · Feedback
A zero-dependency web component showing Lighthouse scores for a URL, published by a speedlify2 instance.

JS
2.8 kB

CSS
∅

Library
∅

speedlify2-score on npm speedlify2-score on GitHub Docs for speedlify2-score
<spin-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm spin-burger on GitHub Docs for spin-burger
<spiral-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm spiral-burger on GitHub Docs for spiral-burger
<spline-viewer> Spline · Media
Embeds an interactive 3D scene made in Spline.

JS
1096.8 kB

CSS
∅

Library
∅

Popular
3 out of 5

Lit @splinetool/viewer on npm Docs for spline-viewer
<spoiler-span> Shajid Hasan Naim · Content
A fast, lightweight web component for creating spoiler text with particle effects

JS
0.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

2mo Stencil spoilerjs on npm spoiler-span on GitHub Docs for spoiler-span
<squash-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm squash-burger on GitHub Docs for squash-burger
<squeeze-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm squeeze-burger on GitHub Docs for squeeze-burger
<squirm-inal> Zach Leatherman · Effects
Squirminal incrementally reveals text inside any arbitrary DOM element structure.

JS
2.1 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/squirminal on npm squirm-inal on GitHub Docs for squirm-inal Demo of squirm-inal
<stampino-element> Justin Fagnani · Utilities
Defines declarative web components entirely in HTML.

JS
11.7 kB

CSS
∅

Library
∅

Lit stampino-element on npm stampino-element on GitHub Docs for stampino-element
<storage-form> David Darnes · Forms
A Web Component that allows you to submit data to local storage

JS
0.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

@daviddarnes/storage-form on npm storage-form on GitHub Docs for storage-form Demo of storage-form
<syntax-highlight> André Ruffert · Content
Syntax Highlighting using the CSS Custom Highlight API

JS
2.7 kB

CSS
1.4 kB

Library
∅

Popular
1 out of 5

1y syntax-highlight-element on npm syntax-highlight on GitHub Docs for syntax-highlight
<tab-container> GitHub · Navigation
Tab container element

JS
3.0 kB

CSS
∅

Library
∅

Popular
3 out of 5

@github/tab-container-element on npm tab-container on GitHub Docs for tab-container
<tabbed-interface> Aaron Gustafson · Navigation
A web component that transforms heading-structured content into an accessible tabbed interface

JS
3.1 kB

CSS
∅

Library
∅

@aarongustafson/tabbed-interface on npm tabbed-interface on GitHub Docs for tabbed-interface Demo of tabbed-interface
<table-modifiable> Aaron Gustafson · Data
A web component that enables users to hide & show columns on an HTML table.

JS
2.3 kB

CSS
∅

Library
∅

@aarongustafson/table-modifiable on npm table-modifiable on GitHub Docs for table-modifiable Demo of table-modifiable
<table-of-contents> Zach Leatherman · Navigation
A zero-dependency web component that progressively enhances (or optionally client renders) a table of contents from the headings on the page and highlights visible sections.

JS
1.4 kB

CSS
∅

Library
∅

@zachleat/table-of-contents on npm table-of-contents on GitHub Docs for table-of-contents Demo of table-of-contents
<table-saw> Zach Leatherman · Data
A small web component for responsive <table> elements.

JS
1.3 kB

CSS
∅

Library
∅

Popular
2 out of 5

@zachleat/table-saw on npm table-saw on GitHub Docs for table-saw Demo of table-saw
<table-sort> Raymond Camden · Data
Progressively enhances a wrapped table so users can click column headers to sort it.

JS
0.6 kB

CSS
∅

Library
∅

@raymondcamden/table-sorter on npm table-sort on GitHub Docs for table-sort Demo of table-sort
<table-sortable> Aaron Gustafson · Data
A web component to enable users to sort table data by clicking on column headers.

JS
2.1 kB

CSS
∅

Library
∅

@aarongustafson/table-sortable on npm table-sortable on GitHub Docs for table-sortable Demo of table-sortable
<target-toggler> Ryan Mulligan · Layout
Toggles the visibility of another element on the page.

target-toggler on GitHub Docs for target-toggler Demo of target-toggler
<task-lists> GitHub · Data
Drag and drop task list items.

JS
2.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

@github/task-lists-element on npm task-lists on GitHub Docs for task-lists
<text-expander> GitHub · Forms
Activates a suggestion menu to expand text snippets as you type.

JS
4.3 kB

CSS
∅

Library
∅

Popular
2 out of 5

@github/text-expander-element on npm text-expander on GitHub Docs for text-expander
<theme-switch> Mahdi Hosseinzadeh · Effects
An animated toggle button that switches between light, dark and system themes.

JS
1.7 kB

CSS
∅

Library
∅

@mahozad/theme-switch on npm theme-switch on GitHub Docs for theme-switch Demo of theme-switch
<throb-ber> Zach Leatherman · Feedback
Loading indicator overlay for images (and maybe other things later).

JS
1.1 kB

CSS
∅

Library
∅

@zachleat/throbber on npm throb-ber on GitHub Docs for throb-ber Demo of throb-ber
<tilt-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm tilt-burger on GitHub Docs for tilt-burger
~~<time-ago>~~ Deprecated GitHub · Data
Formats a timestamp as relative time, like “2 hours ago”.
Superseded by <relative-time>

JS
3.2 kB

CSS
∅

Library
∅

@github/time-elements on npm time-ago on GitHub
<toggle-categories> Stefan Matei · Forms
Toggles which categories of items are shown using a group of checkboxes.

Demo of toggle-categories
<track-list> Miriam Suzanne · Data
A Web Component for enhancing a list of audio tracks

JS
1.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

@terriblemia/track-list on npm track-list on GitHub Docs for track-list Demo of track-list
<turn-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm turn-burger on GitHub Docs for turn-burger
<twirl-burger> Serhii Kulykov · Navigation
A tiny framework agnostic hamburger button element for modern web apps

JS
1.8 kB

CSS
∅

Library
∅

5y vanilla-hamburger on npm twirl-burger on GitHub Docs for twirl-burger
<two-up> Google Chrome Labs · Media
Compare two elements by sliding between them.

JS
2.8 kB

CSS
0.8 kB

Library
∅

Popular
2 out of 5

two-up-element on npm two-up on GitHub Docs for two-up
<typesense-minibar> Timo Tijhof · Forms
Fast 2kB autocomplete search bar

JS
1.9 kB

CSS
4.2 kB

Library
∅

Popular
1 out of 5

typesense-minibar on npm typesense-minibar on GitHub Docs for typesense-minibar Demo of typesense-minibar
<typing-effect> GitHub · Effects
A custom element that shows text as if it were being typed.

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

@github/typing-effect-element on npm typing-effect on GitHub Docs for typing-effect
<universal-snippet> Erik Kroes · Data
Bringing the web together, 1 snippet at a time.

JS
0.4 kB

CSS
∅

Library
∅

4y @erikkroes/universal-snippet on npm universal-snippet on GitHub Docs for universal-snippet
<vaadin-accordion> Vaadin · Layout
`<vaadin-accordion>` is a Web Component implementing accordion widget: a vertically stacked set of expandable panels.

JS
9.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/accordion on npm vaadin-accordion on GitHub Docs for vaadin-accordion
<vaadin-accordion-heading> Vaadin · Layout
The accordion heading element.

JS
4.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/accordion on npm vaadin-accordion-heading on GitHub Docs for vaadin-accordion-heading
<vaadin-accordion-panel> Vaadin · Layout
The accordion panel element.

JS
8.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/accordion on npm vaadin-accordion-panel on GitHub Docs for vaadin-accordion-panel
<vaadin-app-layout> Vaadin · Layout
`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.

JS
6.5 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/app-layout on npm vaadin-app-layout on GitHub Docs for vaadin-app-layout
<vaadin-avatar> Vaadin · Media
`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.

JS
41.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/avatar on npm vaadin-avatar on GitHub Docs for vaadin-avatar
<vaadin-avatar-group> Vaadin · Media
`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.

JS
49.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/avatar-group on npm vaadin-avatar-group on GitHub Docs for vaadin-avatar-group
<vaadin-badge> Vaadin · Feedback
`<vaadin-badge>` is a Web Component for displaying badges.

JS
2.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/badge on npm vaadin-badge on GitHub Docs for vaadin-badge
<vaadin-board> Vaadin · Utilities
`<vaadin-board>` is a web component to create flexible responsive layouts and build nice looking dashboards.

JS
2.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/board on npm vaadin-board on GitHubPro Docs for vaadin-board
<vaadin-board-row> Vaadin · Utilities
`<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows to create flexible responsive layouts and build nice looking dashboard.

JS
2.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/board on npm vaadin-board-row on GitHubPro Docs for vaadin-board-row
<vaadin-breadcrumbs> Vaadin · Navigation
`<vaadin-breadcrumbs>` is a Web Component that displays the user's location within a hierarchy as a trail of links from the root to the current page.

JS
12.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/breadcrumbs on npm vaadin-breadcrumbs on GitHub Docs for vaadin-breadcrumbs
<vaadin-breadcrumbs-item> Vaadin · Navigation
`<vaadin-breadcrumbs-item>` is a single item inside a `<vaadin-breadcrumbs>`.

JS
2.7 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/breadcrumbs on npm vaadin-breadcrumbs-item on GitHub Docs for vaadin-breadcrumbs-item
<vaadin-button> Vaadin · Actions
`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.

JS
7.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/button on npm vaadin-button on GitHub Docs for vaadin-button
<vaadin-card> Vaadin · Layout
`<vaadin-card>` is a versatile container for grouping related content and actions.

JS
4.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/card on npm vaadin-card on GitHub Docs for vaadin-card
<vaadin-chart> Vaadin · Data
`<vaadin-chart>` is a Web Component for creating high quality charts.

JS
313.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/charts on npm vaadin-chart on GitHubPro Docs for vaadin-chart
<vaadin-chart-series> Vaadin · Data
`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.

JS
1.7 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/charts on npm vaadin-chart-series on GitHubPro Docs for vaadin-chart-series
<vaadin-checkbox> Vaadin · Forms
`<vaadin-checkbox>` is an input field representing a binary choice.

JS
12.2 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

17d Lit @vaadin/checkbox on npm vaadin-checkbox on GitHub Docs for vaadin-checkbox
<vaadin-checkbox-group> Vaadin · Forms
`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.

JS
13.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/checkbox-group on npm vaadin-checkbox-group on GitHub Docs for vaadin-checkbox-group
<vaadin-combo-box> Vaadin · Data
`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options presented in a dropdown overlay.

JS
32.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/combo-box on npm vaadin-combo-box on GitHub Docs for vaadin-combo-box
<vaadin-confirm-dialog> Vaadin · Overlays
`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.

JS
15.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/confirm-dialog on npm vaadin-confirm-dialog on GitHub Docs for vaadin-confirm-dialog
<vaadin-context-menu> Vaadin · Navigation
`<vaadin-context-menu>` is a Web Component for creating context menus.

JS
20.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/context-menu on npm vaadin-context-menu on GitHub Docs for vaadin-context-menu
<vaadin-context-menu-item> Vaadin · Navigation
`<vaadin-context-menu-item>` is a Web Component for creating `<vaadin-context-menu>` items.

JS
5.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/context-menu on npm vaadin-context-menu-item on GitHub Docs for vaadin-context-menu-item
<vaadin-crud> Vaadin · Utilities
`<vaadin-crud>` is a Web Component for CRUD operations.

JS
72.4 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/crud on npm vaadin-crud on GitHubPro Docs for vaadin-crud
<vaadin-crud-edit> Vaadin · Layout
`<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides an easily themable button that fires an `edit` event with the row item as detail when clicked.

JS
7.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/crud on npm vaadin-crud-edit on GitHubPro Docs for vaadin-crud-edit
<vaadin-crud-edit-column> Vaadin · Layout
`<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>` that provides a clickable and themable edit icon.

JS
9.4 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/crud on npm vaadin-crud-edit-column on GitHubPro Docs for vaadin-crud-edit-column
<vaadin-custom-field> Vaadin · Forms
`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.

JS
6.7 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/custom-field on npm vaadin-custom-field on GitHub Docs for vaadin-custom-field
<vaadin-dashboard> Vaadin · Layout
A responsive, grid-based dashboard layout component

JS
17.7 kB

CSS
∅

Library
19.9 kB

Popular
2 out of 5

17d Lit @vaadin/dashboard on npm vaadin-dashboard on GitHubPro Docs for vaadin-dashboard
<vaadin-dashboard-layout> Vaadin · Layout
A responsive, grid-based dashboard layout component

JS
2.1 kB

CSS
∅

Library
19.9 kB

Popular
2 out of 5

17d Lit @vaadin/dashboard on npm vaadin-dashboard-layout on GitHubPro Docs for vaadin-dashboard-layout
<vaadin-dashboard-section> Vaadin · Layout
A section component for use with the Dashboard component

JS
12.7 kB

CSS
∅

Library
19.9 kB

Popular
2 out of 5

17d Lit @vaadin/dashboard on npm vaadin-dashboard-section on GitHubPro Docs for vaadin-dashboard-section
<vaadin-dashboard-widget> Vaadin · Utilities
A Widget component for use with the Dashboard component

JS
13.7 kB

CSS
∅

Library
19.9 kB

Popular
2 out of 5

17d Lit @vaadin/dashboard on npm vaadin-dashboard-widget on GitHubPro Docs for vaadin-dashboard-widget
<vaadin-date-picker> Vaadin · Data
`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.

JS
36.8 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

7d Lit @vaadin/date-picker on npm vaadin-date-picker on GitHub Docs for vaadin-date-picker
<vaadin-date-time-picker> Vaadin · Data
`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.

JS
52.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/date-time-picker on npm vaadin-date-time-picker on GitHub Docs for vaadin-date-time-picker
<vaadin-details> Vaadin · Layout
`<vaadin-details>` is a Web Component which the creates an expandable panel similar to `<details>` HTML element.

JS
8.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/details on npm vaadin-details on GitHub Docs for vaadin-details
<vaadin-details-summary> Vaadin · Layout
The details summary element.

JS
5.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/details on npm vaadin-details-summary on GitHub Docs for vaadin-details-summary
<vaadin-dialog> Vaadin · Overlays
`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.

JS
11.5 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/dialog on npm vaadin-dialog on GitHub Docs for vaadin-dialog
<vaadin-drawer-toggle> Vaadin · Overlays
The Drawer Toggle component controls the drawer in App Layout component.

JS
5.5 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/app-layout on npm vaadin-drawer-toggle on GitHub Docs for vaadin-drawer-toggle
<vaadin-email-field> Vaadin · Forms
`<vaadin-email-field>` is a Web Component for email field control in forms.

JS
11.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/email-field on npm vaadin-email-field on GitHub Docs for vaadin-email-field
<vaadin-form-item> Vaadin · Forms
`<vaadin-form-item>` is a Web Component providing labelled form item wrapper for using inside `<vaadin-form-layout>`.

JS
2.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/form-layout on npm vaadin-form-item on GitHub Docs for vaadin-form-item
<vaadin-form-layout> Vaadin · Forms
`<vaadin-form-layout>` is a Web Component providing configurable responsive layout for form elements.

JS
5.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/form-layout on npm vaadin-form-layout on GitHub Docs for vaadin-form-layout
<vaadin-form-row> Vaadin · Forms
`<vaadin-form-row>` is a web component for arranging fields into rows inside a `<vaadin-form-layout>` that is set to autoResponsive mode.

JS
0.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/form-layout on npm vaadin-form-row on GitHub Docs for vaadin-form-row
<vaadin-grid> Vaadin · Layout
`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the the grid can be populated by using renderer callback function.

JS
41.4 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid on GitHub Docs for vaadin-grid
<vaadin-grid-column> Vaadin · Layout
A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>` should look like.

JS
2.5 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-column on GitHub Docs for vaadin-grid-column
<vaadin-grid-column-group> Vaadin · Layout
A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and to configure additional headers and footers.

JS
4.0 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-column-group on GitHub Docs for vaadin-grid-column-group
<vaadin-grid-filter> Vaadin · Layout
`<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls, and handlers for filtering the grid data.

JS
11.3 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-filter on GitHub Docs for vaadin-grid-filter
<vaadin-grid-filter-column> Vaadin · Layout
`<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>` that provides default header renderer and functionality for filtering.

JS
13.4 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-filter-column on GitHub Docs for vaadin-grid-filter-column
<vaadin-grid-pro> Vaadin · Layout
`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality. It extends `<vaadin-grid>` and adds extra features on top of the basic ones.

JS
44.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/grid-pro on npm vaadin-grid-pro on GitHubPro Docs for vaadin-grid-pro
<vaadin-grid-pro-edit-column> Vaadin · Layout
`<vaadin-grid-pro-edit-column>` is a helper element for the `<vaadin-grid-pro>` that provides default inline editing for the items.

JS
32.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/grid-pro on npm vaadin-grid-pro-edit-column on GitHubPro Docs for vaadin-grid-pro-edit-column
<vaadin-grid-selection-column> Vaadin · Layout
`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>` that provides default renderers and functionality for item selection.

JS
16.2 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-selection-column on GitHub Docs for vaadin-grid-selection-column
<vaadin-grid-sort-column> Vaadin · Layout
`<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>` that provides default header renderer and functionality for sorting.

JS
4.0 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-sort-column on GitHub Docs for vaadin-grid-sort-column
<vaadin-grid-sorter> Vaadin · Layout
`<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls, visual feedback, and handlers for sorting the grid data.

JS
1.7 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-sorter on GitHub Docs for vaadin-grid-sorter
<vaadin-grid-tree-column> Vaadin · Layout
`<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>` that provides default renderer and functionality for toggling tree/hierarchical items.

JS
3.9 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-tree-column on GitHub Docs for vaadin-grid-tree-column
<vaadin-grid-tree-toggle> Vaadin · Layout
`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>` that provides toggle and level display functionality for the item tree.

JS
1.5 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

9mo Lit @vaadin/grid on npm vaadin-grid-tree-toggle on GitHub Docs for vaadin-grid-tree-toggle
<vaadin-horizontal-layout> Vaadin · Layout
`<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.

JS
1.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/horizontal-layout on npm vaadin-horizontal-layout on GitHub Docs for vaadin-horizontal-layout
<vaadin-icon> Vaadin · Media
`<vaadin-icon>` is a Web Component for displaying SVG icons.

JS
6.4 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

17d Lit @vaadin/icon on npm vaadin-icon on GitHub Docs for vaadin-icon
<vaadin-iconset> Vaadin · Media
`<vaadin-iconset>` is a Web Component for creating SVG icon collections.

JS
1.7 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

17d Lit @vaadin/icon on npm vaadin-iconset on GitHub Docs for vaadin-iconset
<vaadin-integer-field> Vaadin · Forms
`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.

JS
12.4 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d @vaadin/integer-field on npm vaadin-integer-field on GitHub Docs for vaadin-integer-field
<vaadin-list-box> Vaadin · Data
`<vaadin-list-box>` is a Web Component for creating menus.

JS
5.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/list-box on npm vaadin-list-box on GitHub Docs for vaadin-list-box
<vaadin-login-form> Vaadin · Forms
`<vaadin-login-form>` is a Web Component providing an easy way to require users to log in into an application. Note that component has no shadowRoot.

JS
17.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/login on npm vaadin-login-form on GitHub Docs for vaadin-login-form
<vaadin-login-overlay> Vaadin · Overlays
`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and provides an additional `brand` part for application title and description.

JS
24.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/login on npm vaadin-login-overlay on GitHub Docs for vaadin-login-overlay
<vaadin-map> Vaadin · Utilities
`vaadin-map` is a web component for displaying web maps.

JS
56.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/map on npm vaadin-map on GitHubPro Docs for vaadin-map
<vaadin-markdown> Vaadin · Content
`<vaadin-markdown>` is a web component for rendering Markdown content. It takes Markdown source as input and renders the corresponding HTML.

JS
27.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/markdown on npm vaadin-markdown on GitHub Docs for vaadin-markdown
<vaadin-master-detail-layout> Vaadin · Layout
`<vaadin-master-detail-layout>` is a web component for building UIs with a master (or primary) area and a detail (or secondary) area that is displayed next to, or overlaid on top of, the master area, depending on configuration and viewport size.

JS
5.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/master-detail-layout on npm vaadin-master-detail-layout on GitHub Docs for vaadin-master-detail-layout
<vaadin-menu-bar> Vaadin · Navigation
`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering the user quick access to a consistent set of commands.

JS
26.4 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/menu-bar on npm vaadin-menu-bar on GitHub Docs for vaadin-menu-bar
<vaadin-message> Vaadin · Feedback
`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.

JS
43.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/message-list on npm vaadin-message on GitHub Docs for vaadin-message
<vaadin-message-input> Vaadin · Feedback
`<vaadin-message-input>` is a Web Component for sending messages. It consists of a text area that grows on along with the content, and a send button to send message.

JS
17.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/message-input on npm vaadin-message-input on GitHub Docs for vaadin-message-input
<vaadin-message-list> Vaadin · Feedback
`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>

JS
55.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/message-list on npm vaadin-message-list on GitHub Docs for vaadin-message-list
<vaadin-multi-select-combo-box> Vaadin · Forms
`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends its functionality to allow selecting multiple items, in addition to basic features.

JS
35.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/multi-select-combo-box on npm vaadin-multi-select-combo-box on GitHub Docs for vaadin-multi-select-combo-box
<vaadin-notification> Vaadin · Feedback
`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).

JS
5.4 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/notification on npm vaadin-notification on GitHub Docs for vaadin-notification
<vaadin-number-field> Vaadin · Data
`<vaadin-number-field>` is an input field web component that only accepts numeric input.

JS
12.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/number-field on npm vaadin-number-field on GitHub Docs for vaadin-number-field
<vaadin-password-field> Vaadin · Forms
`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.

JS
15.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/password-field on npm vaadin-password-field on GitHub Docs for vaadin-password-field
<vaadin-popover> Vaadin · Overlays
`<vaadin-popover>` is a Web Component for creating overlays that are positioned next to specified DOM element (target).

JS
12.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/popover on npm vaadin-popover on GitHub Docs for vaadin-popover
<vaadin-progress-bar> Vaadin · Feedback
`<vaadin-progress-bar>` is a Web Component for progress bars.

JS
1.5 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/progress-bar on npm vaadin-progress-bar on GitHub Docs for vaadin-progress-bar
<vaadin-radio-button> Vaadin · Forms
`<vaadin-radio-button>` is a web component representing a choice in a radio group. Only one radio button in the group can be selected at the same time.

JS
10.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/radio-group on npm vaadin-radio-button on GitHub Docs for vaadin-radio-button
<vaadin-radio-group> Vaadin · Forms
`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.

JS
13.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/radio-group on npm vaadin-radio-group on GitHub Docs for vaadin-radio-group
<vaadin-range-slider> Vaadin · Forms
`<vaadin-range-slider>` is a web component that represents a range slider for selecting a subset of the given range.

JS
17.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/slider on npm vaadin-range-slider on GitHub Docs for vaadin-range-slider
<vaadin-rich-text-editor> Vaadin · Content
vaadin-rich-text-editor

JS
103.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/rich-text-editor on npm vaadin-rich-text-editor on GitHubPro Docs for vaadin-rich-text-editor
<vaadin-scroller> Vaadin · Layout
`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.

JS
2.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/scroller on npm vaadin-scroller on GitHub Docs for vaadin-scroller
<vaadin-select> Vaadin · Forms
`<vaadin-select>` is a Web Component for selecting values from a list of items.

JS
23.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/select on npm vaadin-select on GitHub Docs for vaadin-select
<vaadin-select-item> Vaadin · Forms
`<vaadin-select-item>` is a Web Component for creating `<vaadin-select>` items.

JS
4.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/select on npm vaadin-select-item on GitHub Docs for vaadin-select-item
<vaadin-select-list-box> Vaadin · Forms
`<vaadin-select-list-box>` is a Web Component for wrapping `<vaadin-select>` items.

JS
3.5 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

7d Lit @vaadin/select on npm vaadin-select-list-box on GitHub Docs for vaadin-select-list-box
<vaadin-side-nav> Vaadin · Navigation
`<vaadin-side-nav>` is a Web Component for navigation menus.

JS
7.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/side-nav on npm vaadin-side-nav on GitHub Docs for vaadin-side-nav
<vaadin-side-nav-item> Vaadin · Navigation
A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target. Not intended to be used separately.

JS
5.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/side-nav on npm vaadin-side-nav-item on GitHub Docs for vaadin-side-nav-item
<vaadin-slider> Vaadin · Forms
`<vaadin-slider>` is a web component that represents a range slider for selecting numerical values within a defined range.

JS
17.2 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/slider on npm vaadin-slider on GitHub Docs for vaadin-slider
<vaadin-split-layout> Vaadin · Layout
`<vaadin-split-layout>` is a Web Component implementing a split layout for two content elements with a draggable splitter between them.

JS
6.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/split-layout on npm vaadin-split-layout on GitHub Docs for vaadin-split-layout
<vaadin-switch> Vaadin · Forms
`<vaadin-switch>` is a binary on/off switch control for a single setting.

JS
12.9 kB

CSS
∅

Library
19.9 kB

Popular
2 out of 5

17d Lit @vaadin/switch on npm vaadin-switch on GitHub Docs for vaadin-switch
<vaadin-tab> Vaadin · Navigation
`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.

JS
6.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/tabs on npm vaadin-tab on GitHub Docs for vaadin-tab
<vaadin-tabs> Vaadin · Navigation
`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.

JS
10.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/tabs on npm vaadin-tabs on GitHub Docs for vaadin-tabs
<vaadin-tabsheet> Vaadin · Content
`<vaadin-tabsheet>` is a Web Component for organizing and grouping content into scrollable panels. The panels can be switched between by using tabs.

JS
12.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/tabsheet on npm vaadin-tabsheet on GitHub Docs for vaadin-tabsheet
<vaadin-text-area> Vaadin · Content
`<vaadin-text-area>` is a web component for multi-line text input.

JS
12.0 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/text-area on npm vaadin-text-area on GitHub Docs for vaadin-text-area
<vaadin-text-field> Vaadin · Content
`<vaadin-text-field>` is a web component that allows the user to input and edit text.

JS
10.9 kB

CSS
∅

Library
19.9 kB

Popular
4 out of 5

17d Lit @vaadin/text-field on npm vaadin-text-field on GitHub Docs for vaadin-text-field
<vaadin-time-picker> Vaadin · Data
`<vaadin-time-picker>` is a Web Component providing a time-selection field.

JS
29.9 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/time-picker on npm vaadin-time-picker on GitHub Docs for vaadin-time-picker
<vaadin-tooltip> Vaadin · Overlays
`<vaadin-tooltip>` is a Web Component for creating tooltips.

JS
38.6 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/tooltip on npm vaadin-tooltip on GitHub Docs for vaadin-tooltip
<vaadin-upload> Vaadin · Forms
`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.

JS
19.5 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/upload on npm vaadin-upload on GitHub Docs for vaadin-upload
<vaadin-upload-button> Vaadin · Forms
`<vaadin-upload-button>` is a button component for file uploads. When clicked, it opens a file picker dialog and calls addFiles on a linked UploadManager.

JS
9.7 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/upload on npm vaadin-upload-button on GitHub Docs for vaadin-upload-button
<vaadin-upload-drop-zone> Vaadin · Forms
`<vaadin-upload-drop-zone>` is a Web Component that can be used as a drop zone for file uploads. When files are dropped on the drop zone, they are added to a linked UploadManager.

JS
3.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/upload on npm vaadin-upload-drop-zone on GitHub Docs for vaadin-upload-drop-zone
<vaadin-upload-file> Vaadin · Forms
`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.

JS
7.3 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/upload on npm vaadin-upload-file on GitHub Docs for vaadin-upload-file
<vaadin-upload-file-list> Vaadin · Forms
`<vaadin-upload-file-list>` is a Web Component that displays a list of uploaded files. It automatically syncs files from the manager and forwards file events back to it.

JS
11.7 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/upload on npm vaadin-upload-file-list on GitHub Docs for vaadin-upload-file-list
<vaadin-vertical-layout> Vaadin · Layout
`<vaadin-vertical-layout>` provides a simple way to vertically align your HTML elements.

JS
0.8 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/vertical-layout on npm vaadin-vertical-layout on GitHub Docs for vaadin-vertical-layout
<vaadin-virtual-list> Vaadin · Data
`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.

JS
8.1 kB

CSS
∅

Library
19.9 kB

Popular
3 out of 5

17d Lit @vaadin/virtual-list on npm vaadin-virtual-list on GitHub Docs for vaadin-virtual-list
<vellum-dice> Ric Wood · Effects
Web component and interactive dice roller.

JS
7.9 kB

CSS
∅

Library
∅

Lit vellum-dice on npm vellum-dice on GitHub Docs for vellum-dice Demo of vellum-dice
<vertical-video-safe-area> Keith Cirkel · Media
On-screen overlay assisting with short form vertical video recording.

JS
1.0 kB

CSS
∅

Library
∅

11d vertical-video-safe-area on npm
<video-radio-star> Zach Leatherman · Media
Video helper web component. Intended for use with `muted` by default HTML5 videos.

JS
1.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

@zachleat/video-radio-star on npm video-radio-star on GitHub Docs for video-radio-star Demo of video-radio-star
<w3c-banner> Zach Leatherman · Content
A W3C Specification banner web component.

JS
0.6 kB

CSS
∅

Library
∅

@zachleat/w3c-banner on npm w3c-banner on GitHub Docs for w3c-banner Demo of w3c-banner
<wa-accordion> Web Awesome · Layout
Accordions are a vertically stacked set of interactive headings that each contain a title, representing a section of content.

JS
23.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-accordion on GitHub Docs for wa-accordion Demo of wa-accordion
<wa-accordion-item> Web Awesome · Layout
Accordion items are used inside `<wa-accordion>` to create expandable sections with accessible headers.

JS
22.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-accordion-item on GitHub Docs for wa-accordion-item Demo of wa-accordion-item
<wa-animated-image> Web Awesome · Effects
Animated images display GIFs and WEBPs with controls to play and pause them on demand. Use them when you want motion but need to give users control over when it plays.

JS
22.0 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-animated-image on GitHub Docs for wa-animated-image Demo of wa-animated-image
<wa-animation> Web Awesome · Effects
Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the Web Animations API.

JS
4.5 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-animation on GitHub Docs for wa-animation Demo of wa-animation
<wa-avatar> Web Awesome · Media
Avatars represent a person or object with an image, initials, or icon. Use them in lists, comments, and profiles to give users visual context at a glance.

JS
17.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-avatar on GitHub Docs for wa-avatar Demo of wa-avatar
<wa-badge> Web Awesome · Feedback
Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight notifications, categorize items, or flag new activity.

JS
1.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-badge on GitHub Docs for wa-badge Demo of wa-badge
<wa-bar-chart> Web Awesome · Data
Bar charts compare quantities across categories using rectangular bars.

Lit Pro Docs for wa-bar-chart Demo of wa-bar-chart
<wa-breadcrumb> Web Awesome · Navigation
Breadcrumbs display a trail of links that show users where they are in a site's hierarchy. They help users understand the current location and navigate back to parent pages.

JS
20.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-breadcrumb on GitHub Docs for wa-breadcrumb Demo of wa-breadcrumb
<wa-breadcrumb-item> Web Awesome · Navigation
Breadcrumb items represent individual links inside a breadcrumb, typically one per level of the site hierarchy.

JS
1.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-breadcrumb-item on GitHub Docs for wa-breadcrumb-item Demo of wa-breadcrumb-item
<wa-bubble-chart> Web Awesome · Data
Bubble charts add a third dimension to scatter plots by varying the size of each data point.

Lit Pro Docs for wa-bubble-chart Demo of wa-bubble-chart
<wa-button> Web Awesome · Actions
Buttons represent actions the user can take, such as submitting a form, opening a dialog, or navigating to another page.

JS
27.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-button on GitHub Docs for wa-button Demo of wa-button
<wa-button-group> Web Awesome · Actions
Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls, or any set of actions that belong together.

JS
1.3 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-button-group on GitHub Docs for wa-button-group Demo of wa-button-group
<wa-callout> Web Awesome · Feedback
Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings, errors, or other information users should not miss.

JS
1.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-callout on GitHub Docs for wa-callout Demo of wa-callout
<wa-card> Web Awesome · Layout
Cards group related content and actions inside a bordered container. Use them to present products, articles, user profiles, or any self-contained unit of information.

JS
2.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-card on GitHub Docs for wa-card Demo of wa-card
<wa-carousel> Web Awesome · Media
Carousels display a series of content slides along a horizontal or vertical axis, one or more at a time. Users can navigate between slides with controls, pagination, or autoplay.

JS
26.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-carousel on GitHub
<wa-carousel-item> Web Awesome · Media
Carousel items represent individual slides within a carousel.

JS
0.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-carousel-item on GitHub
<wa-chart> Web Awesome · Data
Charts provide a flexible wrapper around Chart.js for building themed data visualizations.

Lit Pro Docs for wa-chart Demo of wa-chart
<wa-checkbox> Web Awesome · Forms
Checkboxes let users toggle an option on or off, or select multiple items from a list. They also support an indeterminate state for partial selections in groups.

JS
22.2 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-checkbox on GitHub Docs for wa-checkbox Demo of wa-checkbox
<wa-checkbox-group> Web Awesome · Forms
Checkbox groups wrap a set of related checkboxes or switches so they share a label, hint, and grouping semantics.

JS
23.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-checkbox-group on GitHub Docs for wa-checkbox-group Demo of wa-checkbox-group
<wa-color-picker> Web Awesome · Forms
Color pickers let users choose a color from a visual palette or by entering a value. They support HEX, RGB, HSL, and HSV formats with optional alpha channel and swatch presets.

JS
56.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-color-picker on GitHub Docs for wa-color-picker Demo of wa-color-picker
<wa-combobox> Web Awesome · Forms
Comboboxes combine a text input with a listbox, allowing users to filter and select from predefined options or enter custom values.

Lit Pro Docs for wa-combobox Demo of wa-combobox
<wa-comparison> Web Awesome · Effects
Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use them for before/after images, design revisions, or side-by-side previews.

JS
22.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-comparison on GitHub Docs for wa-comparison Demo of wa-comparison
<wa-copy-button> Web Awesome · Actions
Copy buttons copy text to the clipboard when the user activates them. They provide built-in success and error feedback so users know the copy worked.

JS
36.2 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-copy-button on GitHub Docs for wa-copy-button Demo of wa-copy-button
<wa-data-grid> Web Awesome · Data
Data grids display tabular data with sorting, selection, filtering, pinning, tree data, grouping with aggregation, column footers, expandable rows, pagination, CSV export, full keyboard navigation, and virtualization for large datasets.

Lit Pro Docs for wa-data-grid Demo of wa-data-grid
<wa-date-input> Web Awesome · Forms
Date inputs let users enter a date through a segmented field or select one visually from a popup calendar.

Lit Pro Docs for wa-date-input Demo of wa-date-input
<wa-date-picker> Web Awesome · Forms
Date pickers display a month grid for selecting a single date or a date range inline.

Lit Pro Docs for wa-date-picker Demo of wa-date-picker
<wa-details> Web Awesome · Layout
Details display a brief summary and expand to reveal additional content. Use them to progressively disclose information, group related FAQs, or hide advanced options.

JS
24.2 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-details on GitHub Docs for wa-details Demo of wa-details
<wa-dialog> Web Awesome · Overlays
Dialogs appear above the page and require the user's immediate attention. Use them for confirmations, forms, or focused tasks that interrupt the main flow.

JS
30.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-dialog on GitHub Docs for wa-dialog Demo of wa-dialog
<wa-divider> Web Awesome · Layout
Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to establish rhythm and hierarchy within menus, toolbars, and layouts.

JS
1.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-divider on GitHub Docs for wa-divider Demo of wa-divider
<wa-doughnut-chart> Web Awesome · Data
Doughnut charts show proportional data as slices of a ring with a hollow center.

Lit Pro Docs for wa-doughnut-chart Demo of wa-doughnut-chart
<wa-drawer> Web Awesome · Overlays
Drawers slide in from the edge of a container to expose additional options and information without navigating away. Useful for navigation menus, filters, and secondary content.

JS
31.0 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-drawer on GitHub Docs for wa-drawer Demo of wa-drawer
<wa-dropdown> Web Awesome · Overlays
Dropdowns display a list of options triggered by a button or other element. They support keyboard navigation, submenus, and checkable items for building menus and context actions.

JS
38.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-dropdown on GitHub Docs for wa-dropdown Demo of wa-dropdown
<wa-dropdown-item> Web Awesome · Overlays
Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable items, and submenu triggers.

JS
20.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-dropdown-item on GitHub Docs for wa-dropdown-item Demo of wa-dropdown-item
<wa-file-input> Web Awesome · Forms
File inputs allow users to select files from their device.

Lit Pro Docs for wa-file-input Demo of wa-file-input
<wa-format-bytes> Web Awesome · Data
Formats a number of bytes as a human-readable string with the appropriate unit, such as kB, MB, or GB. Supports both byte and bit units with configurable locale.

JS
3.4 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-format-bytes on GitHub Docs for wa-format-bytes Demo of wa-format-bytes
<wa-format-date> Web Awesome · Data
Formats a date or time for display using the specified locale and options. Powered by the Intl.DateTimeFormat API for consistent, localized output.

JS
3.4 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-format-date on GitHub Docs for wa-format-date Demo of wa-format-date
<wa-format-number> Web Awesome · Data
Formats a number for display using the specified locale and options, including currency, percent, and unit styles. Powered by the Intl.NumberFormat API.

JS
3.5 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-format-number on GitHub Docs for wa-format-number Demo of wa-format-number
<wa-icon> Web Awesome · Media
Icons are scalable vector symbols that represent actions, content, or status throughout your application. They support Font Awesome and custom icon libraries with animation presets.

JS
17.0 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-icon on GitHub Docs for wa-icon Demo of wa-icon
<wa-include> Web Awesome · Content
Fetches an external HTML file and embeds its contents inline on the page. Useful for reusing shared markup like headers, footers, and partials across multiple pages.

JS
1.4 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-include on GitHub Docs for wa-include Demo of wa-include
<wa-input> Web Awesome · Forms
Inputs collect single-line data from the user, such as text, numbers, email addresses, and passwords. They support labels, hints, validation, and prefix or suffix slots.

JS
27.2 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-input on GitHub Docs for wa-input Demo of wa-input
<wa-intersection-observer> Web Awesome · Utilities
Tracks immediate child elements and fires events as they move in and out of view. Useful for lazy loading, scroll-triggered animations, and viewport-aware interactions.

JS
1.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-intersection-observer on GitHub Docs for wa-intersection-observer Demo of wa-intersection-observer
<wa-known-date> Web Awesome · Data
Known dates let users enter dates they already know - birthdays, expirations, document dates - through three separate day, month, and year fields shown in the locale's natural order.

JS
11.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-known-date on GitHub Docs for wa-known-date Demo of wa-known-date
<wa-line-chart> Web Awesome · Data
Line charts show trends over time by connecting data points with line segments.

Lit Pro Docs for wa-line-chart Demo of wa-line-chart
<wa-markdown> Web Awesome · Content
Markdown elements render markdown content as HTML directly in the browser, making it easy to display user-generated content or documentation without a server-side build step.

JS
11.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-markdown on GitHub Docs for wa-markdown Demo of wa-markdown
<wa-mutation-observer> Web Awesome · Utilities
Mutation observers watch for changes to an element's DOM tree and emit an event when they occur. Provides a thin, declarative interface to the browser's MutationObserver API.

JS
1.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-mutation-observer on GitHub Docs for wa-mutation-observer Demo of wa-mutation-observer
<wa-number-input> Web Awesome · Forms
Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing. Use them for quantities, measurements, and other numeric form fields.

JS
26.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-number-input on GitHub Docs for wa-number-input Demo of wa-number-input
<wa-option> Web Awesome · Forms
Options represent the individual choices inside a select or similar form control. Each option holds a value and the label shown to the user.

JS
21.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-option on GitHub Docs for wa-option Demo of wa-option
<wa-otp-input> Web Awesome · Forms
OTP inputs collect one-time passcodes, PINs, and other fixed-length codes, one character per segment. Use them for SMS verification, two-factor authentication, and invite codes.

JS
9.5 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-otp-input on GitHub Docs for wa-otp-input Demo of wa-otp-input
<wa-page> Web Awesome · Layout
Pages scaffold an entire application layout with header, navigation, sidebar, main content, aside, and footer regions.

JS
35.0 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-page on GitHub Docs for wa-page Demo of wa-page
<wa-pagination> Web Awesome · Navigation
Pagination splits long lists of content into pages, letting users navigate between them.

JS
24.3 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-pagination on GitHub Docs for wa-pagination Demo of wa-pagination
<wa-pie-chart> Web Awesome · Data
Pie charts show the proportional composition of a whole as slices of a circle.

Lit Pro Docs for wa-pie-chart Demo of wa-pie-chart
<wa-polar-area-chart> Web Awesome · Data
Polar area charts compare values using segments that radiate from a center point with varying radius.

Lit Pro Docs for wa-polar-area-chart Demo of wa-polar-area-chart
<wa-popover> Web Awesome · Overlays
Popovers display contextual content and interactive elements in a floating panel anchored to a trigger.

JS
16.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-popover on GitHub Docs for wa-popover Demo of wa-popover
<wa-popup> Web Awesome · Overlays
Popups declaratively anchor one element to another and keep them positioned together as the page scrolls or resizes. Primarily a low-level building block for popovers, dropdowns, and tooltips.

JS
14.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-popup on GitHub Docs for wa-popup Demo of wa-popup
<wa-progress-bar> Web Awesome · Feedback
Progress bars show how far along an ongoing operation is as a horizontal fill. Use them for file uploads, multi-step flows, or any task with measurable progress.

JS
4.3 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-progress-bar on GitHub Docs for wa-progress-bar Demo of wa-progress-bar
<wa-progress-ring> Web Awesome · Feedback
Progress rings show how far along a determinate operation is using a circular indicator. Use them as a compact alternative to progress bars when horizontal space is limited.

JS
4.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-progress-ring on GitHub Docs for wa-progress-ring Demo of wa-progress-ring
<wa-qr-code> Web Awesome · Media
QR codes encode a URL or other short text into a scannable image, rendered client-side using the Canvas API.

JS
7.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-qr-code on GitHub Docs for wa-qr-code Demo of wa-qr-code
<wa-radar-chart> Web Awesome · Data
Radar charts compare multiple variables at once by plotting data on a radial grid.

Lit Pro Docs for wa-radar-chart Demo of wa-radar-chart
<wa-radio> Web Awesome · Forms
Radios represent a single option within a mutually exclusive set. Use them inside a radio group when users must pick exactly one choice from a small list.

JS
20.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-radio on GitHub Docs for wa-radio Demo of wa-radio
<wa-radio-group> Web Awesome · Forms
Radio groups wrap a set of radios so they function as a single form control with one shared value. They handle keyboard navigation, labeling, and validation for the group as a whole.

JS
23.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-radio-group on GitHub Docs for wa-radio-group Demo of wa-radio-group
<wa-random-content> Web Awesome · Effects
Selects one or more child elements at random and displays them, hiding the rest.

JS
3.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-random-content on GitHub Docs for wa-random-content Demo of wa-random-content
<wa-rating> Web Awesome · Forms
Ratings display a numeric score as a row of selectable symbols, typically stars. Use them to capture quick feedback or show an average rating for a product or piece of content.

JS
24.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-rating on GitHub Docs for wa-rating Demo of wa-rating
<wa-relative-time> Web Awesome · Data
Relative times display a date as a localized phrase relative to now, such as "3 hours ago" or "in 2 days". The phrase updates automatically as time passes and respects the user's locale.

JS
3.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-relative-time on GitHub Docs for wa-relative-time Demo of wa-relative-time
<wa-resize-observer> Web Awesome · Layout
Resize observers watch their slotted elements for size changes and emit an event when they occur. Provides a thin, declarative interface to the browser's ResizeObserver API.

JS
1.0 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-resize-observer on GitHub Docs for wa-resize-observer Demo of wa-resize-observer
<wa-scatter-chart> Web Awesome · Data
Scatter charts reveal relationships between two variables by plotting data points on a grid.

Lit Pro Docs for wa-scatter-chart Demo of wa-scatter-chart
<wa-scroller> Web Awesome · Layout
Scrollers wrap overflowing content in an accessible container with visual cues that help users recognize and navigate scrollable regions.

JS
4.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-scroller on GitHub Docs for wa-scroller Demo of wa-scroller
<wa-select> Web Awesome · Forms
Selects let users choose one or more values from a dropdown list of predefined options. Use them in forms when a fixed set of choices needs to fit in limited space.

JS
47.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-select on GitHub Docs for wa-select Demo of wa-select
<wa-skeleton> Web Awesome · Feedback
Skeletons show placeholder shapes where content will appear once it finishes loading, reducing perceived wait time and preventing layout shift.

JS
0.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-skeleton on GitHub Docs for wa-skeleton Demo of wa-skeleton
<wa-slider> Web Awesome · Forms
Sliders let users choose a numeric value within a defined range by dragging a thumb along a track.

JS
25.5 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-slider on GitHub Docs for wa-slider Demo of wa-slider
<wa-sparkline> Web Awesome · Data
Sparklines display inline data trends as compact, visual charts.

Lit Pro Docs for wa-sparkline Demo of wa-sparkline
<wa-spinner> Web Awesome · Feedback
Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states where a determinate progress bar isn't practical.

JS
4.0 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-spinner on GitHub Docs for wa-spinner Demo of wa-spinner
<wa-split-panel> Web Awesome · Layout
Split panels display two adjacent panels separated by a draggable divider, letting users resize each side to suit their workflow.

JS
5.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-split-panel on GitHub Docs for wa-split-panel Demo of wa-split-panel
<wa-step> Web Awesome · Navigation
Steps represent a single stage inside a `<wa-stepper>`, showing its position, label, and status.

JS
24.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-step on GitHub Docs for wa-step Demo of wa-step
<wa-stepper> Web Awesome · Forms
Steppers visually guide users through a process step by step, breaking content into clear, logical stages.

JS
27.1 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-stepper on GitHub Docs for wa-stepper Demo of wa-stepper
<wa-switch> Web Awesome · Forms
Switches toggle a single setting on or off and apply the change immediately, without requiring a form submission.

JS
8.4 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-switch on GitHub Docs for wa-switch Demo of wa-switch
<wa-tab> Web Awesome · Navigation
Tabs label and activate an individual panel inside a tab group.

JS
1.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tab on GitHub Docs for wa-tab Demo of wa-tab
<wa-tab-group> Web Awesome · Navigation
Tab groups organize related content into a single container that displays one panel at a time, with tabs for switching between them.

JS
31.2 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tab-group on GitHub Docs for wa-tab-group Demo of wa-tab-group
<wa-tab-panel> Web Awesome · Navigation
Tab panels hold the content shown for a single tab inside a tab group.

JS
1.5 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tab-panel on GitHub Docs for wa-tab-panel Demo of wa-tab-panel
<wa-tag> Web Awesome · Feedback
Tags label, categorize, or represent selections with a compact visual marker. Use them for status indicators, filters, or removable chips.

JS
28.2 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tag on GitHub Docs for wa-tag Demo of wa-tag
<wa-tag-input> Web Awesome · Forms
Tag inputs collect a list of short values, such as keywords, email addresses, or labels, as removable tags.

JS
34.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tag-input on GitHub Docs for wa-tag-input Demo of wa-tag-input
<wa-textarea> Web Awesome · Forms
Textareas collect multi-line text input from the user, with optional resizing and character counting.

JS
9.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-textarea on GitHub Docs for wa-textarea Demo of wa-textarea
<wa-time-input> Web Awesome · Forms
Time pickers let users enter a time through a segmented field or select one visually from a popup column picker. They support 12- and 24-hour formats, optional seconds, and locale-aware segment order.

JS
27.7 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-time-input on GitHub Docs for wa-time-input Demo of wa-time-input
<wa-toast> Web Awesome · Overlays
Toasts display brief, non-blocking notifications that appear temporarily above the page content.

JS
26.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-toast on GitHub Docs for wa-toast Demo of wa-toast
<wa-toast-item> Web Awesome · Overlays
Toast items are individual notifications displayed within a toast container.

JS
24.8 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-toast-item on GitHub Docs for wa-toast-item Demo of wa-toast-item
<wa-tooltip> Web Awesome · Overlays
Tooltips display brief contextual information when the user hovers, focuses, or taps a target element.

JS
16.9 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tooltip on GitHub Docs for wa-tooltip Demo of wa-tooltip
<wa-tree> Web Awesome · Navigation
Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.

JS
31.3 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tree on GitHub Docs for wa-tree Demo of wa-tree
<wa-tree-item> Web Awesome · Navigation
Tree items represent a single hierarchical node inside a tree, and can contain nested items that expand and collapse.

JS
29.4 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-tree-item on GitHub Docs for wa-tree-item Demo of wa-tree-item
<wa-video> Web Awesome · Media
Videos are used to embed and play video content with custom controls and captions.

Lit Pro Docs for wa-video Demo of wa-video
<wa-video-playlist> Web Awesome · Media
Video playlists wrap multiple <wa-video> elements into a playlist with navigation controls.

Lit Pro Docs for wa-video-playlist Demo of wa-video-playlist
<wa-zoomable-frame> Web Awesome · Layout
Zoomable frames embed iframe content with built-in controls for zooming, panning, and managing interaction.

JS
22.6 kB

CSS
∅

Library
8.2 kB

Popular
5 out of 5

Lit @awesome.me/webawesome on npm wa-zoomable-frame on GitHub Docs for wa-zoomable-frame Demo of wa-zoomable-frame
<webcam-view> Keith Cirkel · Media
A custom element that shows the webcam, or plays a video in its place.

JS
0.7 kB

CSS
∅

Library
∅

11d webcam-view on npm
<webcare-webshare> Zach Leatherman · Actions
Web component to use the Web Share API, with a fallback to copy to the clipboard.

JS
0.7 kB

CSS
∅

Library
∅

@zachleat/webcare-webshare on npm webcare-webshare on GitHub Docs for webcare-webshare Demo of webcare-webshare
<wired-button> Wired Elements · Actions
Collection of hand-drawn sketchy web components

JS
1.3 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-button on GitHub Docs for wired-button
<wired-calendar> Wired Elements · Data
Collection of hand-drawn sketchy web components

JS
3.4 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-calendar on GitHub Docs for wired-calendar
<wired-card> Wired Elements · Layout
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-card on GitHub Docs for wired-card
<wired-checkbox> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-checkbox on GitHub Docs for wired-checkbox
<wired-combo> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
3.6 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-combo on GitHub Docs for wired-combo
<wired-dialog> Wired Elements · Overlays
Collection of hand-drawn sketchy web components

JS
1.8 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-dialog on GitHub Docs for wired-dialog
<wired-divider> Wired Elements · Layout
Collection of hand-drawn sketchy web components

JS
0.8 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-divider on GitHub Docs for wired-divider
<wired-fab> Wired Elements · Actions
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-fab on GitHub Docs for wired-fab
<wired-icon> Wired Elements · Media
Collection of hand-drawn sketchy web components

JS
∅

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-icon on GitHub Docs for wired-icon
<wired-icon-button> Wired Elements · Media
Collection of hand-drawn sketchy web components

JS
1.1 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-icon-button on GitHub Docs for wired-icon-button
<wired-image> Wired Elements · Media
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-image on GitHub Docs for wired-image
<wired-input> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.5 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-input on GitHub Docs for wired-input
<wired-item> Wired Elements · Layout
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-item on GitHub Docs for wired-item
<wired-link> Wired Elements · Navigation
Collection of hand-drawn sketchy web components

JS
1.0 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-link on GitHub Docs for wired-link
<wired-listbox> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.4 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-listbox on GitHub Docs for wired-listbox
<wired-mat-icon> Wired Elements · Media
Collection of hand-drawn sketchy web components

JS
∅

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-mat-icon on GitHub Docs for wired-mat-icon
<wired-progress> Wired Elements · Feedback
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-progress on GitHub Docs for wired-progress
<wired-radio> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.3 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-radio on GitHub Docs for wired-radio
<wired-radio-group> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-radio-group on GitHub Docs for wired-radio-group
<wired-search-input> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.6 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-search-input on GitHub Docs for wired-search-input
<wired-slider> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.5 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-slider on GitHub Docs for wired-slider
<wired-spinner> Wired Elements · Feedback
Collection of hand-drawn sketchy web components

JS
1.1 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-spinner on GitHub Docs for wired-spinner
<wired-tab> Wired Elements · Navigation
Collection of hand-drawn sketchy web components

JS
1.6 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-tab on GitHub Docs for wired-tab
<wired-tabs> Wired Elements · Navigation
Collection of hand-drawn sketchy web components

JS
1.3 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-tabs on GitHub Docs for wired-tabs
<wired-textarea> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.3 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-textarea on GitHub Docs for wired-textarea
<wired-toggle> Wired Elements · Forms
Collection of hand-drawn sketchy web components

JS
1.2 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-toggle on GitHub Docs for wired-toggle
<wired-video> Wired Elements · Media
Collection of hand-drawn sketchy web components

JS
4.1 kB

CSS
∅

Library
14.1 kB

Popular
1 out of 5

6y Lit wired-elements on npm wired-video on GitHub Docs for wired-video
<wl-backdrop> Weightless · Overlays
High-quality Web Components with a small footprint

JS
0.4 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-backdrop on GitHub Docs for wl-backdrop
<wl-banner> Weightless · Feedback
High-quality Web Components with a small footprint

JS
0.9 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-banner on GitHub Docs for wl-banner
<wl-button> Weightless · Actions
High-quality Web Components with a small footprint

JS
6.7 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-button on GitHub Docs for wl-button
<wl-card> Weightless · Layout
High-quality Web Components with a small footprint

JS
0.6 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-card on GitHub Docs for wl-card
<wl-checkbox> Weightless · Forms
High-quality Web Components with a small footprint

JS
7.0 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-checkbox on GitHub Docs for wl-checkbox
<wl-dialog> Weightless · Overlays
High-quality Web Components with a small footprint

JS
4.3 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-dialog on GitHub Docs for wl-dialog
<wl-divider> Weightless · Layout
High-quality Web Components with a small footprint

JS
0.5 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-divider on GitHub Docs for wl-divider
<wl-expansion> Weightless · Overlays
High-quality Web Components with a small footprint

JS
7.9 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-expansion on GitHub Docs for wl-expansion
<wl-icon> Weightless · Media
High-quality Web Components with a small footprint

JS
0.5 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-icon on GitHub Docs for wl-icon
<wl-label> Weightless · Forms
High-quality Web Components with a small footprint

JS
1.3 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-label on GitHub Docs for wl-label
<wl-list-item> Weightless · Data
High-quality Web Components with a small footprint

JS
6.8 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-list-item on GitHub Docs for wl-list-item
<wl-nav> Weightless · Navigation
High-quality Web Components with a small footprint

JS
0.9 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-nav on GitHub Docs for wl-nav
<wl-popover> Weightless · Overlays
High-quality Web Components with a small footprint

JS
5.2 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-popover on GitHub Docs for wl-popover
<wl-popover-card> Weightless · Overlays
High-quality Web Components with a small footprint

JS
1.3 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

7y Lit weightless on npm wl-popover-card on GitHub Docs for wl-popover-card
<wl-progress-bar> Weightless · Feedback
High-quality Web Components with a small footprint

JS
1.4 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-progress-bar on GitHub Docs for wl-progress-bar
<wl-progress-spinner> Weightless · Feedback
High-quality Web Components with a small footprint

JS
1.6 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-progress-spinner on GitHub Docs for wl-progress-spinner
<wl-radio> Weightless · Forms
High-quality Web Components with a small footprint

JS
7.0 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-radio on GitHub Docs for wl-radio
<wl-ripple> Weightless · Effects
High-quality Web Components with a small footprint

JS
1.9 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-ripple on GitHub Docs for wl-ripple
<wl-select> Weightless · Forms
High-quality Web Components with a small footprint

JS
6.4 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-select on GitHub Docs for wl-select
<wl-slider> Weightless · Forms
High-quality Web Components with a small footprint

JS
7.2 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-slider on GitHub Docs for wl-slider
<wl-snackbar> Weightless · Feedback
High-quality Web Components with a small footprint

JS
3.9 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-snackbar on GitHub Docs for wl-snackbar
<wl-switch> Weightless · Forms
High-quality Web Components with a small footprint

JS
6.6 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-switch on GitHub Docs for wl-switch
<wl-tab> Weightless · Navigation
High-quality Web Components with a small footprint

JS
8.2 kB

CSS
∅

Library
8.0 kB

Popular
1 out of 5

6y Lit weightless on npm wl-tab on GitHub Docs for wl-tab
<wobbly-box> Dave Rupert · Effects
A web component for drawing wobbly boxes

JS
0.6 kB

CSS
∅

Library
∅

wobbly-box on npm wobbly-box on GitHub Docs for wobbly-box
<x-frame-bypass> niu tech · Layout
Web Component extending IFrame to bypass X-Frame-Options: deny/sameorigin

JS
1.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

7y x-frame-bypass on npm x-frame-bypass on GitHub Docs for x-frame-bypass
<xy-button> xy-ui · Actions
a front end cross-framework ui library based on web-components

JS
3.1 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-button on GitHub Docs for xy-button
<xy-button-group> xy-ui · Actions
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-button-group on GitHub Docs for xy-button-group
<xy-checkbox> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
4.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-checkbox on GitHub Docs for xy-checkbox
<xy-checkbox-group> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-checkbox-group on GitHub Docs for xy-checkbox-group
<xy-col> xy-ui · Layout
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-col on GitHub Docs for xy-col
<xy-color-pane> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-color-pane on GitHub Docs for xy-color-pane
<xy-color-picker> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
11.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

5y xy-ui on npm xy-color-picker on GitHub Docs for xy-color-picker
<xy-datalist> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
4.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-datalist on GitHub Docs for xy-datalist
<xy-date-pane> xy-ui · Data
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-date-pane on GitHub Docs for xy-date-pane
<xy-date-picker> xy-ui · Data
a front end cross-framework ui library based on web-components

JS
10.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-date-picker on GitHub Docs for xy-date-picker
<xy-date-range-pane> xy-ui · Data
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-date-range-pane on GitHub Docs for xy-date-range-pane
<xy-dialog> xy-ui · Overlays
a front end cross-framework ui library based on web-components

JS
8.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

5y xy-ui on npm xy-dialog on GitHub Docs for xy-dialog
<xy-form> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
1.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-form on GitHub Docs for xy-form
<xy-form-item> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-form-item on GitHub Docs for xy-form-item
<xy-gallery> xy-ui · Media
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-gallery on GitHub Docs for xy-gallery
<xy-icon> xy-ui · Media
a front end cross-framework ui library based on web-components

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-icon on GitHub Docs for xy-icon
<xy-img> xy-ui · Media
a front end cross-framework ui library based on web-components

JS
4.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-img on GitHub Docs for xy-img
<xy-input> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
7.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-input on GitHub Docs for xy-input
<xy-input-group> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-input-group on GitHub Docs for xy-input-group
<xy-layout> xy-ui · Layout
a front end cross-framework ui library based on web-components

JS
0.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-layout on GitHub Docs for xy-layout
<xy-loading> xy-ui · Feedback
a front end cross-framework ui library based on web-components

JS
0.8 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-loading on GitHub Docs for xy-loading
<xy-message> xy-ui · Feedback
a front end cross-framework ui library based on web-components

JS
2.0 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-message on GitHub Docs for xy-message
<xy-optgroup> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-optgroup on GitHub Docs for xy-optgroup
<xy-option> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
3.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-option on GitHub Docs for xy-option
<xy-pagination> xy-ui · Navigation
a front end cross-framework ui library based on web-components

JS
4.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-pagination on GitHub Docs for xy-pagination
<xy-popcon> xy-ui · Overlays
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-popcon on GitHub Docs for xy-popcon
<xy-popover> xy-ui · Overlays
a front end cross-framework ui library based on web-components

JS
5.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-popover on GitHub Docs for xy-popover
<xy-radio> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
1.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-radio on GitHub Docs for xy-radio
<xy-radio-group> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-radio-group on GitHub Docs for xy-radio-group
<xy-rate> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
3.2 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-rate on GitHub Docs for xy-rate
<xy-row> xy-ui · Layout
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-row on GitHub Docs for xy-row
<xy-select> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
7.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-select on GitHub Docs for xy-select
<xy-slider> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
3.4 kB

CSS
∅

Library
∅

Popular
1 out of 5

5y xy-ui on npm xy-slider on GitHub Docs for xy-slider
<xy-switch> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
1.1 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-switch on GitHub Docs for xy-switch
<xy-tab> xy-ui · Navigation
a front end cross-framework ui library based on web-components

JS
4.6 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-tab on GitHub Docs for xy-tab
<xy-tab-content> xy-ui · Navigation
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-tab-content on GitHub Docs for xy-tab-content
<xy-table> xy-ui · Data
a front end cross-framework ui library based on web-components

JS
1.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-table on GitHub Docs for xy-table
<xy-td> xy-ui · Data
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-td on GitHub Docs for xy-td
<xy-text> xy-ui · Content
a front end cross-framework ui library based on web-components

JS
0.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-text on GitHub Docs for xy-text
<xy-textarea> xy-ui · Forms
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-textarea on GitHub Docs for xy-textarea
<xy-tips> xy-ui · Overlays
a front end cross-framework ui library based on web-components

JS
1.9 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-tips on GitHub Docs for xy-tips
<xy-tr> xy-ui · Data
a front end cross-framework ui library based on web-components

JS
38.5 kB

CSS
∅

Library
∅

Popular
1 out of 5

4y xy-ui on npm xy-tr on GitHub Docs for xy-tr
<xy-view> xy-ui · Layout
a front end cross-framework ui library based on web-components

JS
2.3 kB

CSS
∅

Library
∅

Popular
1 out of 5

6y xy-ui on npm xy-view on GitHub Docs for xy-view
<youtube-embed> Raymond Camden · Media
A lazy-loading YouTube embed that shows a thumbnail until clicked.

youtube-embed on GitHub Docs for youtube-embed Demo of youtube-embed
<youtube-player> Alan W. Smith · Media
A YouTube player with custom controls.

youtube-player on GitHub Demo of youtube-player

Find a custom element

Component of the week