Installation

Package Manager

# npm
npm install @tessera-ui/core

# pnpm
pnpm add @tessera-ui/core

# yarn
yarn add @tessera-ui/core

Framework Wrappers

For first-class framework integration, install the appropriate wrapper package:

# React
pnpm add @tessera-ui/react

# Vue
pnpm add @tessera-ui/vue

# Angular
pnpm add @tessera-ui/angular

CDN

For quick prototyping, use the CDN:

<script type="module" src="https://unpkg.com/@tessera-ui/core/dist/tessera-ui/tessera-ui.esm.js"></script>

Setup

Vanilla HTML / Web Components

<script type="module">
  import { defineCustomElements } from '@tessera-ui/core/loader';
  defineCustomElements();
</script>

<ts-button variant="primary">Click me</ts-button>

React

import { TsButton } from '@tessera-ui/react';

function App() {
  return <TsButton variant="primary">Click me</TsButton>;
}

Vue

<script setup>
import { TsButton } from '@tessera-ui/vue';
</script>

<template>
  <TsButton variant="primary">Click me</TsButton>
</template>

Angular

app.module.ts

import { TsButtonModule } from '@tessera-ui/angular';

@NgModule({
  imports: [TsButtonModule],
})
export class AppModule {}

component.html

<ts-button variant="primary">Click me</ts-button>