This template helps you quickly set up a minimal repro case for Spectrum Web Components. Use it to report bugs, test ideas, or showcase usage examples.

Use this package.json as your base:

{
    "dependencies": {
        "lit": "^3.2.1",
        // always required for theme files
        "@spectrum-web-components/theme": "1.6.0",
        "@spectrum-web-components/button": "1.6.0"
    }
}

You can run this in:

• StackBlitz

• A local environment using Vite

// Theme registration
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';

// E.g Spectrum components
import '@spectrum-web-components/button/sp-button.js';

// Lit
import { LitElement, html, css, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('my-element')
export default class MyElement extends LitElement {
    protected render(): TemplateResult {
        return html`
            <sp-theme color="light" scale="medium">
                <!-- <your component> -->
            </sp-theme>
        `;
    }
}

Once you’ve set up your custom use case:

• Run it on your choice of Hosting Platform For e.g Stackblitz or Codesandbox.

• Make sure it reproduces the issue clearly.

• Share the URL with the Spectrum team.

• Keep your demo minimal and self-contained.

• Use only stable versions of components.

• Always wrap your components in for proper theming.

• Use the component docs for guidance.

👉 Live Demo on StackBlitz

For any questions on repro please ask in #spectrum-web-components slack channel