Web Components Templates

WCT (Web Components Templates) is an open-source collection of Web Components. Feel free to use, copy, and share them however you see fit :)

Photo by Hal Gatewood on Unsplash

Learn more

Hello, world!

This page was built using web components.

Photo by Shapelined on Unsplash

Web components

are a set of web APIs that allow us to create custom and reusable elements in web pages and apps

Carousel

This is a carousel component

It can be populated with any number of items as needed. These items can be styled individually for more flexibility.

We can do a lot with web components!

They can have any number of variants...

For example, buttonsClick me!

can change sizeSmall

or colorFilled

or bothAmazing

We can easily reuse components We can pass some text into this component

and customize them to fit a project

Why use web components?

Reduce external dependencies: components are self-contained, which means they don't require external dependencies like a component library would. This can simplify the development process and make it easier to manage dependencies. Web components are not tied to any specific vendor or framework.

Customization: Web components can be customized to fit specific project requirements. In contrast, component libraries often come with predefined styles and functionality that may not be suitable for every project.

Interoperability: Web components can be used with a variety of web technologies and frameworks, making them more versatile and flexible than component libraries. This means that developers can use web components in any project, regardless of the underlying technology stack.

Icons from illustrations.run