Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vaadin/web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://github.com/vaadin/web-components
custom-elements design-system design-systems ui-components ui-kit ui-library vaadin web-components webcomponents
Last synced: 7 days ago
JSON representation
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
- Host: GitHub
- URL: https://github.com/vaadin/web-components
- Owner: vaadin
- Created: 2020-12-26T16:28:50.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-17T13:01:21.000Z (14 days ago)
- Last Synced: 2024-12-17T13:27:41.094Z (13 days ago)
- Topics: custom-elements, design-system, design-systems, ui-components, ui-kit, ui-library, vaadin, web-components, webcomponents
- Language: JavaScript
- Homepage: https://vaadin.com/docs/latest/components
- Size: 132 MB
- Stars: 476
- Watchers: 17
- Forks: 83
- Open Issues: 1,033
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-web-components - Vaadin
- awesome-web-components - Vaadin components - Evolving set of high-quality web components for building business web applications. (Real World / Component Libraries)
README
Vaadin web components
[Vaadin components](https://vaadin.com/components) is an evolving set of high-quality web components for business web applications.
[](https://github.com/vaadin/web-components/actions/workflows/coverage.yml)
[](https://twitter.com/vaadin)
## Installation
Install the components that you need from npm:
```sh
npm install @vaadin/grid
```
## Usage
[Live demo →](https://webcomponents.dev/edit/JZcKP3kkHcJIgiCaI818/www/index.html)
Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript:
```html
Vaadin example
// Importing the following modules registers <vaadin-grid> and its column
// elements so that you can use them in this page.
import '@vaadin/grid/vaadin-grid.js';
import '@vaadin/grid/vaadin-grid-selection-column.js';
import '@vaadin/grid/vaadin-grid-sort-column.js';
// Use component's properties to populate data.
const grid = document.querySelector('vaadin-grid');
fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
.then((res) => res.json())
.then((json) => (grid.items = json.result));
```
Serve your HTML with a development server that supports bare module specifiers, such as [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/):
```sh
npm i -g @web/dev-server
web-dev-server --node-resolve --open
```
## Components
This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions.
### Core Components
The components below are licensed under the Apache License 2.0.
| Component | npm version (latest) | npm version (next) | Issues |
| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| [``](https://github.com/vaadin/web-components/tree/main/packages/accordion) | [](https://www.npmjs.com/package/@vaadin/accordion) | [](https://www.npmjs.com/package/@vaadin/accordion/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-accordion) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/app-layout) | [](https://www.npmjs.com/package/@vaadin/app-layout) | [](https://www.npmjs.com/package/@vaadin/app-layout/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-app-layout) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/avatar) | [](https://www.npmjs.com/package/@vaadin/avatar) | [](https://www.npmjs.com/package/@vaadin/avatar/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-avatar) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/avatar-group) | [](https://www.npmjs.com/package/@vaadin/avatar-group) | [](https://www.npmjs.com/package/@vaadin/avatar-group/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-avatar-group) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/button) | [](https://www.npmjs.com/package/@vaadin/button) | [](https://www.npmjs.com/package/@vaadin/button/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-button) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/checkbox) | [](https://www.npmjs.com/package/@vaadin/checkbox) | [](https://www.npmjs.com/package/@vaadin/checkbox/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-checkbox) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/checkbox-group) | [](https://www.npmjs.com/package/@vaadin/checkbox-group) | [](https://www.npmjs.com/package/@vaadin/checkbox-group/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-checkbox-group) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/combo-box) | [](https://www.npmjs.com/package/@vaadin/combo-box) | [](https://www.npmjs.com/package/@vaadin/combo-box/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-combo-box) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/confirm-dialog) | [](https://www.npmjs.com/package/@vaadin/confirm-dialog) | [](https://www.npmjs.com/package/@vaadin/confirm-dialog/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-confirm-dialog) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/context-menu) | [](https://www.npmjs.com/package/@vaadin/context-menu) | [](https://www.npmjs.com/package/@vaadin/context-menu/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-context-menu) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/custom-field) | [](https://www.npmjs.com/package/@vaadin/custom-field) | [](https://www.npmjs.com/package/@vaadin/custom-field/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-custom-field) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/date-picker) | [](https://www.npmjs.com/package/@vaadin/date-picker) | [](https://www.npmjs.com/package/@vaadin/date-picker/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-date-picker) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/date-time-picker) | [](https://www.npmjs.com/package/@vaadin/date-time-picker) | [](https://www.npmjs.com/package/@vaadin/date-time-picker/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-date-time-picker) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/details) | [](https://www.npmjs.com/package/@vaadin/details) | [](https://www.npmjs.com/package/@vaadin/details/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-details) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/dialog) | [](https://www.npmjs.com/package/@vaadin/dialog) | [](https://www.npmjs.com/package/@vaadin/dialog/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-dialog) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/email-field) | [](https://www.npmjs.com/package/@vaadin/email-field) | [](https://www.npmjs.com/package/@vaadin/email-field/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-email-field) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/form-layout) | [](https://www.npmjs.com/package/@vaadin/form-layout) | [](https://www.npmjs.com/package/@vaadin/form-layout/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-form-layout) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/grid) | [](https://www.npmjs.com/package/@vaadin/grid) | [](https://www.npmjs.com/package/@vaadin/grid/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-grid) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/horizontal-layout) | [](https://www.npmjs.com/package/@vaadin/horizontal-layout) | [](https://www.npmjs.com/package/@vaadin/horizontal-layout/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-horizontal-layout) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/icon) | [](https://www.npmjs.com/package/@vaadin/icon) | [](https://www.npmjs.com/package/@vaadin/icon/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-icon) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/icons) | [](https://www.npmjs.com/package/@vaadin/icons) | [](https://www.npmjs.com/package/@vaadin/icons/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-icons) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/integer-field) | [](https://www.npmjs.com/package/@vaadin/integer-field) | [](https://www.npmjs.com/package/@vaadin/integer-field/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-integer-field) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/item) | [](https://www.npmjs.com/package/@vaadin/item) | [](https://www.npmjs.com/package/@vaadin/item/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-item) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/list-box) | [](https://www.npmjs.com/package/@vaadin/list-box) | [](https://www.npmjs.com/package/@vaadin/list-box/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-list-box) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/login) | [](https://www.npmjs.com/package/@vaadin/login) | [](https://www.npmjs.com/package/@vaadin/login/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-login) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/menu-bar) | [](https://www.npmjs.com/package/@vaadin/menu-bar) | [](https://www.npmjs.com/package/@vaadin/menu-bar/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-menu-bar) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/message-input) | [](https://www.npmjs.com/package/@vaadin/message-input) | [](https://www.npmjs.com/package/@vaadin/message-input/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-message-input) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/message-list) | [](https://www.npmjs.com/package/@vaadin/message-list) | [](https://www.npmjs.com/package/@vaadin/message-list/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-message-list) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/multi-select-combo-box) | [](https://www.npmjs.com/package/@vaadin/multi-select-combo-box) | [](https://www.npmjs.com/package/@vaadin/multi-select-combo-box/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-multi-select-combo-box) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/notification) | [](https://www.npmjs.com/package/@vaadin/notification) | [](https://www.npmjs.com/package/@vaadin/notification/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-notification) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/number-field) | [](https://www.npmjs.com/package/@vaadin/number-field) | [](https://www.npmjs.com/package/@vaadin/number-field/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-number-field) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/password-field) | [](https://www.npmjs.com/package/@vaadin/password-field) | [](https://www.npmjs.com/package/@vaadin/password-field/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-password-field) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/popover) | [](https://www.npmjs.com/package/@vaadin/popover) | [](https://www.npmjs.com/package/@vaadin/popover/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-popover) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/progress-bar) | [](https://www.npmjs.com/package/@vaadin/progress-bar) | [](https://www.npmjs.com/package/@vaadin/progress-bar/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-progress-bar) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/radio-group) | [](https://www.npmjs.com/package/@vaadin/radio-group) | [](https://www.npmjs.com/package/@vaadin/radio-group/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-radio-group) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/scroller) | [](https://www.npmjs.com/package/@vaadin/scroller) | [](https://www.npmjs.com/package/@vaadin/scroller/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-scroller) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/select) | [](https://www.npmjs.com/package/@vaadin/select) | [](https://www.npmjs.com/package/@vaadin/select/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-select) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/side-nav) | [](https://www.npmjs.com/package/@vaadin/side-nav) | [](https://www.npmjs.com/package/@vaadin/side-nav/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-side-nav) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/split-layout) | [](https://www.npmjs.com/package/@vaadin/split-layout) | [](https://www.npmjs.com/package/@vaadin/split-layout/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-split-layout) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/tabs) | [](https://www.npmjs.com/package/@vaadin/tabs) | [](https://www.npmjs.com/package/@vaadin/tabs/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-tabs) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/tabsheet) | [](https://www.npmjs.com/package/@vaadin/tabsheet) | [](https://www.npmjs.com/package/@vaadin/tabsheet/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-tabsheet) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/text-area) | [](https://www.npmjs.com/package/@vaadin/text-area) | [](https://www.npmjs.com/package/@vaadin/text-area/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-text-area) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/text-field) | [](https://www.npmjs.com/package/@vaadin/text-field) | [](https://www.npmjs.com/package/@vaadin/text-field/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-text-field) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/time-picker) | [](https://www.npmjs.com/package/@vaadin/time-picker) | [](https://www.npmjs.com/package/@vaadin/time-picker/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-time-picker) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/tooltip) | [](https://www.npmjs.com/package/@vaadin/tooltip) | [](https://www.npmjs.com/package/@vaadin/tooltip/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-tooltip) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/upload) | [](https://www.npmjs.com/package/@vaadin/upload) | [](https://www.npmjs.com/package/@vaadin/upload/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-upload) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/virtual-list) | [](https://www.npmjs.com/package/@vaadin/virtual-list) | [](https://www.npmjs.com/package/@vaadin/virtual-list/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-virtual-list) |
### Pro Components
The components below are licensed under [Vaadin Commercial License and Service Terms](https://vaadin.com/commercial-license-and-service-terms) and available as part of the [Vaadin Pro Subscription](https://vaadin.com/pricing).
| Component | npm version (latest) | npm version (next) | Issues |
| ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| [``](https://github.com/vaadin/web-components/tree/main/packages/board) | [](https://www.npmjs.com/package/@vaadin/board) | [](https://www.npmjs.com/package/@vaadin/board/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-board) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/charts) | [](https://www.npmjs.com/package/@vaadin/charts) | [](https://www.npmjs.com/package/@vaadin/charts/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-charts) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/cookie-consent) | [](https://www.npmjs.com/package/@vaadin/cookie-consent) | [](https://www.npmjs.com/package/@vaadin/cookie-consent/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-cookie-consent) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/crud) | [](https://www.npmjs.com/package/@vaadin/crud) | [](https://www.npmjs.com/package/@vaadin/crud/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-crud) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/dashboard) | [](https://www.npmjs.com/package/@vaadin/dashboard) | [](https://www.npmjs.com/package/@vaadin/dashboard/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-dashboard) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/grid-pro) | [](https://www.npmjs.com/package/@vaadin/grid-pro) | [](https://www.npmjs.com/package/@vaadin/grid-pro/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-grid-pro) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/map) | [](https://www.npmjs.com/package/@vaadin/map) | [](https://www.npmjs.com/package/@vaadin/map/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-map) |
| [``](https://github.com/vaadin/web-components/tree/main/packages/rich-text-editor) | [](https://www.npmjs.com/package/@vaadin/rich-text-editor) | [](https://www.npmjs.com/package/@vaadin/rich-text-editor/v/next) | [Issues](https://github.com/vaadin/web-components/labels/vaadin-rich-text-editor) |
## Browser support
**Desktop:**
- Chrome (evergreen)
- Firefox (evergreen)
- Safari 15 or newer
- Edge (Chromium, evergreen)
**Mobile:**
- Chrome (evergreen) for Android (4.4 or newer)
- Safari for iOS (15 or newer)
## Documentation
Check out our [design system documentation](https://vaadin.com/docs/latest/components).
## Examples
Are you looking for an example project to get started? Visit [start.vaadin.com](https://start.vaadin.com/?preset=fusion) to create a Vaadin app.
## Questions
For help and support questions, please use [Vaadin Forum](https://vaadin.com/forum/).
## Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
## Contributing
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
## Development
See [the Development guide](DEVELOPMENT.md) for how to set up and develop this project locally.
## LICENSE
For specific package(s), check the LICENSE file under the package folder.