Pre-1.0 releaseLooma
The first UI library built on Declarative HTML Components. Write a component as markup, and ship it as real native HTML or as Vue components with no runtime of ours inside them.
pnpm add @threadlabs/loomaOne source, written as markup
Looma is the first UI library built on Declarative HTML Components, a proposal to give HTML its own reactive component model. Every Looma component is written once as that markup, and the same definition ships two ways.
You write
<ui-button variant="solid">Save</ui-button>A page gets
<button data-component="ui-button" data-ui-button-state="variant variant=solid">
Save
</button>A real native button. No custom element, no shadow root, no wrapper: the element the browser already knows, with its focus, forms and accessibility intact.
A Vue app gets
<script setup lang="ts">
import { Button } from "@threadlabs/looma/vue";
</script>
<template>
<Button variant="solid">Save</Button>
</template>An ordinary Vue 3.5 component, compiled from the same definition, with no Looma runtime inside it.
Why it is built this way
The platform does the work
Components lower to native elements, styles scope with CSS @scope, and validity uses the browser's own constraint validation. Less of Looma runs in your app because more of it is already in the browser.
Themed by about 40 values
One contract of design tokens; everything else derives from it. A real product theme is around 35 declarations, and no component needs its own.
Read the token contractProven against a real product
Every release is verified by converting a shipping application and comparing its screens. Support and limits are written down, not implied.
Release 1 support and limitationsStart with one component
Add the package, import the styles, and put a <ui-button> on a page. Nothing else changes.