> ## Documentation Index
> Fetch the complete documentation index at: https://docs.truststack.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Components

At the TrustStack, we have created a set of Web Components that are designed to be used in your applications. These components are designed to be used in your applications, and are designed to be used in your applications.

This is a library that will continuously be updated based on design inspiration and feedback from our users.

The goal is to get you setup with a set of templates quickly, and then you can customize them to your needs.

# Usage

To add our Web Components to your templates, follow these steps:

1. Include the Web Components script in your HTML file. You can do this by adding the following line within the `<head>` section of your HTML:

```html theme={null}
<script type="importmap">
  {
    "imports": {
      "@material/web/": "https://esm.run/@material/web/"
    }
  }
</script>

<script type="module">
  import "@material/web/all.js";
  import {styles as typescaleStyles} from "@material/web/typography/md-typescale-styles.js";

  document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>

<link
  rel="stylesheet"
  href="https://components.truststack.dev/v0.0.1/canvas/canvas.css"
/>

<script
  type="module"
  src="https://components.truststack.dev/v0.0.1/canvas/canvas.esm.js"
/>

<script
  nomodule
  src="https://components.truststack.dev/v0.0.1/canvas/canvas.js?"
/>
```

2. Use the Web Components in your HTML by adding the desired component tags directly into your markup. For example:

```html theme={null}
<stack-layout></stack-layout>
```

3. Customize the components as needed by adding attributes.

For more detailed information on each component and its usage, please refer to the component documentation.

# Theming

The TrustStack Web Components are designed to be used with our theming system style system, which is heavily based on [Google's Material Design](https://m3.material.io/)

Review the [Theming](/canvas/templates/theming) documentation for more information on how to use the theming system.
