Components

LSD ships nine base components, each built as a token-aware primitive with surface- and container-context awareness. This page introduces the contract and walks through customisation.

Component contract

Every LSD component is governed by a small contract:

• Tokens. All visual decisions are token references — never raw values.
• Surface-aware. Components read --role--current from their surface context.
• Container-responsive. Layout responds to container queries, never viewport queries.
• Reduced motion respected. All motion checks prefers-reduced-motion.

Installation

npm install @lsd/framework

# or with bun
bun add @lsd/framework

Then import the base stylesheet:

<link rel="stylesheet" href="/framework-dist/lsd-base.css" />

Basic example

The button component, used standalone:

<button class="lsd-btn weight-primary">
  Get started
</button>

Variants

Every component supports the .weight-* family of modifiers:

• .weight-primary — default emphasis
• .weight-ghost — transparent background, ink border
• .weight-outlined — transparent background, accent border

Surface awareness

Drop a component into a surface band and it adapts:

<section data-surface="ambient">
  <button class="lsd-btn">Adapts to ambient</button>
</section>

See the Surfaces page for the full surface vocabulary.

Token overrides

Every component variable can be overridden at the surface or per-instance level:

.my-section {
  --lsd-btn-bg: var(--color-brand-700);
  --lsd-btn-fg: var(--color-ink-on-brand);
}

---