Tessera UI

Tessera UI is built on Stencil, which compiles one set of web components into native packages for React, Vue, Angular and plain HTML. 71 components, design tokens, three density modes.

At a glance

Install	npm install @tessera-ui/react (or -vue, -angular, -core)
Components	71
Built with	Stencil, compiled to web components
Theming	CSS custom properties, three-tier token architecture
Density	compact, comfortable, spacious
License	MIT

Read this first

Version 0.6.3, one GitHub star, roughly ninety npm downloads a week. This is a solo project in beta, and the README's "production-ready" claim is the author's, not a verified state. We list it because the technical approach is sound and the component count is real, but it is not a dependency to build a business on today.

No build step required

Because the core compiles to standard custom elements, it works from a script tag with no bundler at all:

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

<ts-button variant="primary">Get Started</ts-button>
<ts-input label="Email" type="email"></ts-input>

The framework packages wrap those same elements, so the behaviour is identical whichever route you take.

The density modes are the nice touch

Compact, comfortable and spacious are switchable through tokens rather than through per-component props. Most libraries in this directory ship one density and leave you to override padding by hand, which is exactly the kind of change that fragments a design system.

Choose it if

• You want a web components base with real framework wrappers and no build step.
• Density switching matters to your product, for example an admin tool with a data-dense mode.
• You are experimenting rather than committing.

Look elsewhere if

• You need stability. This is 0.6, by a single maintainer.
• You want proven cross-framework components. Ark UI and Shoelace are the established answers.