Baustein UI · v0.1

Native building blocks for product interfaces.

A framework-agnostic system on Lit, Shadow DOM, and CSS Custom Properties. Small primitives, reusable patterns.

System

11 layers · 4 beta primitives · 1 stable

Baustein UI is organized into clear layers. Each layer has its own responsibility. Click a card to enter the layer.

Principles

7 non-negotiable

What sets Baustein UI apart from yet another UI kit — and why a file with 200 buttons is still not a design system.

Native first

Web Components, Shadow DOM, CSS Custom Properties. Frameworks come and go, the web stays.

Composition over configuration

Combine small blocks. No button with 47 booleans. Slots instead of feature flags.

States are first-class

Loading, empty, error, disabled, pending, stale — all part of the design, not an afterthought.

Clear contracts

Every component documents inputs, outputs, events, slots, parts. Without a contract, no system.

Agent-friendly by default

Unambiguous names, repeatable structures, readable contracts. Humans understand it. Machines do not ruin it.

Clarity over cleverness

Beauty comes from order, rhythm, good decisions — not from ornament.

Ship blocks, not bloat

No huge dependencies. No magic. Just blocks that do what they should.

Quickstart

v0.1 · single package

Four foundation primitives, one package. Lit as peer dependency. Tokens as separate CSS that you import and override.

Install

pnpm add baustein-ui lit

Import

/* Tokens as CSS */
@import 'baustein-ui/tokens.css';

// Components — auto-register all four
import 'baustein-ui';

Use

<bau-card>
  <span slot="header">Project Status</span>
  <p>Everything running. Suspicious, but beautiful.</p>
  <bau-stack slot="footer" direction="row" justify="between">
    <bau-button variant="ghost">Cancel</bau-button>
    <bau-button variant="accent">Save</bau-button>
  </bau-stack>
</bau-card>

Theme

/* Override one token. The whole system follows. */
:root {
  --bau-color-accent: #2a5bff;
  --bau-radius-md: 0.5rem;
  --bau-control-height-md: 2.5rem;
}