or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

content.mddata.mddatetime.mddialogs.mdindex.mdinput.mdlayout.mdnavigation.mdpro.mdselection.md
tile.json

tessl/npm-vaadin--vaadin

Comprehensive collection of business-ready web components for modern web applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vaadin/vaadin@24.9.x

To install, run

npx @tessl/cli install tessl/npm-vaadin--vaadin@24.9.0

index.mddocs/

Vaadin Web Components

Vaadin Web Components is a comprehensive collection of enterprise-grade web components for building modern business applications. Built with Lit/LitElement, this ecosystem provides 70+ professionally designed, accessible, and themeable components following web standards.

Package Information

  • Package Name: @vaadin/vaadin
  • Package Type: npm (meta-package)
  • Language: TypeScript/JavaScript
  • Installation: npm install @vaadin/vaadin

Core Imports

The meta-package provides access to all Vaadin components. Import specific components as needed:

// Individual component imports
import '@vaadin/button';
import '@vaadin/text-field';
import '@vaadin/grid';
import '@vaadin/date-picker';

// Web components are automatically registered and ready to use

For CommonJS:

require('@vaadin/button');
require('@vaadin/text-field');
// Components auto-register when imported

Basic Usage

import '@vaadin/button';
import '@vaadin/text-field';
import '@vaadin/notification';

// Use components in HTML
const textField = document.createElement('vaadin-text-field');
textField.label = 'Name';
textField.placeholder = 'Enter your name';

const button = document.createElement('vaadin-button');
button.textContent = 'Submit';
button.addEventListener('click', () => {
  const notification = document.createElement('vaadin-notification');
  notification.textContent = `Hello ${textField.value}!`;
  notification.open();
  document.body.appendChild(notification);
});

document.body.appendChild(textField);
document.body.appendChild(button);

Architecture

Vaadin Web Components follows consistent architectural patterns:

  • Mixin-based Architecture: Core functionality provided through mixins (ElementMixin, ThemableMixin, FocusMixin)
  • Lit/LitElement Foundation: All components built on modern Lit library for efficient rendering
  • Web Standards: Native Custom Elements v1, Shadow DOM, and ES Modules
  • Accessibility First: WCAG 2.1 AA compliant with comprehensive keyboard and screen reader support
  • Theming System: Two complete design systems (Lumo and Material Design) with CSS custom properties
  • TypeScript Support: Complete type definitions for all components and APIs
  • Event-driven: Consistent event patterns with both native and custom events

Capabilities

Layout Components

Foundation layout components for organizing application structure and content flow.

// App layout with drawer navigation
interface AppLayout extends HTMLElement {
  drawerOpened: boolean;
  overlay: boolean;
  primarySection: 'navbar' | 'drawer';
  openDrawer(): void;
  closeDrawer(): void;
}

// Flexbox layouts
interface HorizontalLayout extends HTMLElement {
  theme: string;
}

interface VerticalLayout extends HTMLElement {
  theme: string;
}

// Responsive form layout
interface FormLayout extends HTMLElement {
  responsiveSteps: FormLayoutResponsiveStep[];
}

Layout Components

Input Components

Comprehensive form input controls with validation, accessibility, and consistent styling.

// Base field properties shared by all inputs
interface FieldMixin {
  value: string;
  label: string;
  placeholder: string;
  required: boolean;
  readonly: boolean;
  disabled: boolean;
  invalid: boolean;
  errorMessage: string;
  helperText: string;
  validate(): boolean;
  checkValidity(): boolean;
  focus(): void;
}

// Text input fields
interface TextField extends HTMLElement, FieldMixin {
  type: string;
  pattern: string;
  minlength: number;
  maxlength: number;
  autocomplete: string;
  autocapitalize: string;
  autocorrect: string;
}

// Specialized input fields
interface EmailField extends TextField {}
interface PasswordField extends TextField {
  passwordVisible: boolean;
}
interface NumberField extends TextField {
  min: number;
  max: number;
  step: number;
  stepUp(increment?: number): void;
  stepDown(decrement?: number): void;
}

Input Components

Selection Components

Advanced selection controls including dropdowns, multi-select, and list components.

// Dropdown select
interface Select extends HTMLElement {
  value: string;
  items: SelectItem[];
  placeholder: string;
  opened: boolean;
  open(): void;
  close(): void;
}

// Combo box with filtering
interface ComboBox extends HTMLElement {
  value: string;
  selectedItem: object | null;
  items: object[];
  itemLabelPath: string;
  itemValuePath: string;
  filteredItems: object[];
  loading: boolean;
  allowCustomValue: boolean;
  filter: string;
  open(): void;
  close(): void;
  clearFilter(): void;
}

// Radio group for exclusive selection
interface RadioGroup extends HTMLElement {
  value: string;
  label: string;
  required: boolean;
  disabled: boolean;
  validate(): boolean;
}

Selection Components

Data Components

High-performance data display and manipulation components for handling large datasets.

// Advanced data grid
interface Grid extends HTMLElement {
  items: object[];
  selectedItems: object[];
  activeItem: object | null;
  detailsOpenedItems: object[];
  columnReorderingAllowed: boolean;
  multiSort: boolean;
  selectItem(item: object): void;
  deselectItem(item: object): void;
  selectAll(): void;
  deselectAll(): void;
  expandItem(item: object): void;
  collapseItem(item: object): void;
  clearCache(): void;
}

// Virtualized list for performance
interface VirtualList extends HTMLElement {
  items: object[];
  renderer: (root: HTMLElement, list: VirtualList, index: number, item: object) => void;
  scrollToIndex(index: number): void;
}

Data Components

Navigation Components

Navigation and organizational components for structuring user interfaces.

// Tab navigation
interface Tabs extends HTMLElement {
  selected: number;
  orientation: 'horizontal' | 'vertical';
  selectIndex(index: number): void;
}

// Accordion panels
interface Accordion extends HTMLElement {
  opened: number | null;
  items: AccordionPanel[];
  open(index: number): void;
  close(): void;
}

// Side navigation
interface SideNav extends HTMLElement {
  collapsible: boolean;
  collapsed: boolean;
}

// Menu bar with dropdowns
interface MenuBar extends HTMLElement {
  items: MenuBarItem[];
  opened: boolean;
  close(): void;
}

Navigation Components

Dialog Components

Modal dialogs, overlays, and notification components for user interactions.

// Modal dialog
interface Dialog extends HTMLElement {
  opened: boolean;
  modeless: boolean;
  draggable: boolean;
  resizable: boolean;
  open(): void;
  close(): void;
}

// Toast notifications
interface Notification extends HTMLElement {
  opened: boolean;
  duration: number;
  position: NotificationPosition;
  open(): void;
  close(): void;
}

// Confirmation dialog
interface ConfirmDialog extends HTMLElement {
  opened: boolean;
  header: string;
  message: string;
  confirmText: string;
  cancelText: string;
  open(): void;
  close(): void;
}

Dialog Components

Content Components

Display and presentation components for rich content and media.

// Interactive button
interface Button extends HTMLElement {
  theme: string;
  disabled: boolean;
  click(): void;
  focus(): void;
}

// Content card
interface Card extends HTMLElement {
  theme: string;
}

// User avatar
interface Avatar extends HTMLElement {
  name: string;
  abbr: string;
  img: string;
  colorIndex: number;
}

// Progress indicator
interface ProgressBar extends HTMLElement {
  value: number;
  min: number;
  max: number;
  indeterminate: boolean;
}

// Message input for chat
interface MessageInput extends HTMLElement {
  value: string;
  disabled: boolean;
  focus(): void;
}

// Cookie consent banner
interface CookieConsent extends HTMLElement {
  position: string;
  message: string;
  show(): void;
  hide(): void;
}

Content Components

Date/Time Components

Specialized components for date and time selection with internationalization support.

// Date picker
interface DatePicker extends HTMLElement {
  value: string; // ISO date format
  min: string;
  max: string;
  opened: boolean;
  i18n: DatePickerI18n;
  open(): void;
  close(): void;
  validate(): boolean;
}

// Time picker
interface TimePicker extends HTMLElement {
  value: string; // HH:mm format
  min: string;
  max: string;
  step: number; // seconds
  validate(): boolean;
}

// Combined date-time picker
interface DateTimePicker extends HTMLElement {
  value: string; // ISO datetime format
  datePlaceholder: string;
  timePlaceholder: string;
  validate(): boolean;
}

Date/Time Components

Professional Components

Advanced commercial components for enterprise applications (Pro subscription required).

// Professional grid with inline editing
interface GridPro extends Grid {
  editOnClick: boolean;
  startEdit(item: object, column: GridProEditColumn): void;
  stopEdit(cancel?: boolean): void;
}

// Rich text editor
interface RichTextEditor extends HTMLElement {
  value: string; // Delta format
  htmlValue: string;
  readonly: boolean;
  focus(): void;
}

// Interactive charts
interface Chart extends HTMLElement {
  options: HighchartsOptions;
  type: string;
  categories: string[];
  update(): void;
}

Professional Components

Type Definitions

// Common event types
type CustomEventMap<T> = {
  [K in keyof T as `${string & K}-changed`]: CustomEvent<{ value: T[K] }>;
};

// Layout types
interface FormLayoutResponsiveStep {
  minWidth?: string;
  columns: number;
  labelsPosition?: 'aside' | 'top';
}

// Selection types
interface SelectItem {
  label: string;
  value: string;
  disabled?: boolean;
  component?: string;
}

// Validation types
interface ValidationResult {
  isValid: boolean;
  property: string;
  validator: string;
  message: string;
}

// Theme variants
type ThemeVariant =
  | 'small' | 'large'
  | 'primary' | 'secondary' | 'tertiary'
  | 'success' | 'error' | 'contrast'
  | 'icon' | 'contained' | 'outlined';

// Notification positions
type NotificationPosition =
  | 'top-start' | 'top-center' | 'top-end'
  | 'middle'
  | 'bottom-start' | 'bottom-center' | 'bottom-end';

// Date picker internationalization
interface DatePickerI18n {
  monthNames: string[];
  weekdays: string[];
  weekdaysShort: string[];
  firstDayOfWeek: number;
  today: string;
  cancel: string;
  formatTitle?: (monthName: string, fullYear: number) => string;
  formatDate?: (date: Date) => string;
  parseDate?: (text: string) => Date | undefined;
}