Tesla components ·

Tesla components is a set of Web Components aimed at recreating the Tesla Web App.

• They have been created with Lit
• Some components extend Lion
• Project has been created with Vite

How to install

To use tesla components within your project, you will first need to install it as a dependency.

npm i tesla-components

How to use

VanillaJS

// Import your component
<script type="module">
  import 'tesla-components'
</script>

// Use the component
<tesla-button variant="dark">
    Lorem ipsum
</tesla-button>

<script>
    const button = document.querySelector('tesla-button');
    button.addEventListener('click', () => {
        console.log('clicked');
    })
</script>

Angular

// Import your component
// ...
import 'tesla-components'

@NgModule({
    declarations: [/* ... */],
    imports: [/* ... */],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

// Use the component
<tesla-button variant="dark"
              (click)="clickHandler()"
>
    Lorem ipsum
</tesla-button>

clickHandler() {
    console.log('clicked');
}

React

// Use the component
<TeslaButtonReact
    variant="dark"
    onClick={() => (console.log('clicked'))}
></TeslaButtonReact>