thx-components

THX 1138 web components — a classless CSS framework + 64 custom elements, designed for AI/LLM authoring. Zero runtime dependency, zero class soup.

For AI agents (and humans who hate boilerplate)

Most CSS frameworks drown you in utility classes:

<!-- Tailwind: 47 classes, 1,400 tokens of noise -->
<div
  class="flex flex-col gap-2 p-4 bg-neutral-100 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all"
></div>

This is a classless CSS framework. Write semantic HTML and it already looks beautiful. Drop a <thx-*> element and it slots right in. No classes to memorize, no design tokens to juggle, no 47-class incantations.

Why this matters for AI: LLMs generate beautiful dashboards and websites with dramatically less HTML/CSS boilerplate. You write <section>, <h1>, <button>, <thx-card> — not a wall of class="...". Output is smaller, faster, and cleaner.

How it works

1. aesthetics.css — bare HTML tags (<h1>, <p>, <button>, etc.) are styled automatically. No utility classes needed.
2. webcomponents.js — drop <thx-*> custom elements anywhere. Together they produce extremely minimal HTML with no classes and no build step.

aesthetics.css loads Open Props tokens with CSS @import. Load it before rendering pages that depend on the design tokens or the classless base theme.

Quick Start

Two files. That's it.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/thx-components/aesthetics.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/thx-components/webcomponents.js"></script>

Then use any component:

<h1>Report</h1>
<p>Bare HTML is already styled.</p>
<thx-button variant="primary">CONFIRM</thx-button>
<thx-alert variant="error" open>CRITICAL</thx-alert>

npm

npm install thx-components

import 'thx-components';

The package vendors the runtime Lit module under vendor/lit.js, so published consumers do not need a runtime lit dependency. The npm lit dependency is only used for local type checking.

Selective imports

Use the package entry to register all 64 custom elements:

import 'thx-components';

Use the component barrel when you need class references:

import { ThxButton, ThxDialog } from 'thx-components';

Use direct component imports when you only want specific custom elements registered:

import 'thx-components/src/components/thx-button.js';
import 'thx-components/src/components/thx-dialog.js';

For the theme, load the CSS explicitly:

import 'thx-components/aesthetics.css';

Verification

npm run typecheck
npm test
npm run check

npm test runs browser tests that import webcomponents.js, verify all 64 custom elements register, verify the package entry exports component classes, and cover key behavior for button, select, form, and include fixes.

License

MIT