Web Components

Layout

A box
A card

Lists

Basic List

save

Three line list

Line 2

Line 3

check

Two line list

Line 2

personal

One line list

No icon list item

Dense List

save

List item 1

Line 2

Line 3

check

List item 2

Line 2

close

List item 3

List item 4

Forms and Inputs

Select

Apples Fuji Apple Gala Apple

Auto Complete

Fuji Gala Honeycrisp Granny Smith Golden Delicious Pink Lady Braeburn McIntosh

Favorite Apple Selected:


Input Fields

What should we call you? 0/20


Checkboxes and Toggles

Checkbox

The Label The Label The Label Disabled Checked Disabled Checkbox

Small Checkbox

The Label The Label The Label Disabled Checked Disabled Checkbox

Toggle

The Label The Label The Label Disabled Selected Toggle Disabled Toggle

Small Toggle

Small Toggle Small Toggle The Label Disabled Selected Toggle Disabled Toggle

Radio Buttons

Horizontal

Where are you using the components? Vue React Angular No Framework

Vertical

Where are you using the components? Vue React Angular No Framework

Buttons and Chips

Chips

Click Select Me Chip can be deleted Chip Primary Chip Accent Chip Warn

Basic Buttons

Default Primary Accent Warn Disabled

Raised Buttons

Default Primary Accent Warn Disabled

Stroked Buttons

Default Primary Accent Warn Disabled

Small Buttons

Default Primary Accent Warn

Default Primary Accent Warn

Default Primary Accent Warn

Icon Buttons

accessibility accessibility accessibility accessibility

Tabs

Web Components: Style Incapsulation

Web components provide a versatile and powerful alternative to framework-specific components by leveraging native browser capabilities and standards. This standardization ensures that web components can seamlessly integrate across different projects and frameworks without compatibility issues.

With built-in support for encapsulation through the Shadow DOM, web components isolate their internal structure, styles, and behavior, preventing unintended side effects on other parts of the application. This encapsulation is crucial for maintaining a clean and manageable codebase, especially in large-scale applications where multiple components interact.

Web Components: Reusable

One of the standout benefits of web components is their reusability. Unlike framework-specific components that may require rewriting or significant modifications to be used in different projects, web components are inherently reusable. They can be created once and used across various projects, regardless of the underlying technology stack. This reduces development time and effort, as developers can leverage existing components without worrying about framework-specific dependencies. Additionally, this reusability aligns with the DRY (Don't Repeat Yourself) principle, promoting efficient and maintainable code.

Web Components: Framework agnostic

Interoperability is another key advantage of web components. They adhere to web standards, ensuring that they work uniformly across all modern browsers and can be used alongside other web technologies without conflicts. This cross-framework compatibility is particularly beneficial in heterogeneous environments where multiple frameworks coexist, or where gradual migration from one framework to another is planned. By adopting web components, developers can future-proof their applications, ensuring that their components remain usable and relevant even as the underlying frameworks evolve or change. This flexibility and longevity make web components a strategic choice for forward-thinking development teams.

Dialogs

Open Dialog

A Web Component Dialog

Web components offer significant advantages over framework-specific components due to their inherent reusability, interoperability, and encapsulation. Unlike framework components that often depend on specific libraries or runtime environments, Web components are built on standard web technologies (HTML, CSS, and JavaScript) and can be used across any modern web framework or even in plain HTML pages. This makes them highly reusable and reduces the dependency on a particular framework, fostering a more modular and maintainable codebase. Moreover, Web components provide strong encapsulation through the Shadow DOM, ensuring that styles and scripts do not leak and affect other parts of the application, leading to more predictable and stable user interfaces. These features make Web components a versatile choice for building robust, framework-agnostic user interfaces that are easier to manage and scale.

Cancel Save

Alerts

Web components offer unparalleled reusability, encapsulation, and interoperability, making them an ideal choice for building modern, framework-agnostic web applications. Web components offer unparalleled reusability, encapsulation, and interoperability, making them an ideal choice for building modern, framework-agnostic web applications. Web components offer unparalleled reusability, encapsulation, and interoperability, making them an ideal choice for building modern, framework-agnostic web applications. Web components offer unparalleled reusability, encapsulation, and interoperability, making them an ideal choice for building modern, framework-agnostic web applications. Web components offer unparalleled reusability, encapsulation, and interoperability, making them an ideal choice for building modern, framework-agnostic web applications.

Divider Example

Vertical

Left content Right Content

Left content Dark Divider Right Content Dark Divider

Horizontal

Above Content

Below Content