Components · primitive

Code blocks. Read, copy, switch.

For docs, snippets, and the inevitable npx lsd init. Inline chips for sentence-level pieces, framed blocks for full samples, tabs when the same idea lives across languages, and a copy button that actually says it worked.

Inline chip

Mono-spaced, padded, tonal — for code inside prose.

Run lsd build --watch in one terminal and lsd serve in another. Token writes hot-reload through --bg, --accent, and friends.

Framed block · line numbers · highlight

Pseudo-syntax coloring via tokens — keywords, strings, comments, numbers.

javascript

12345678

// Aurora · cascade keyframes across siblings
import { cascade } from 'lsd-template';

const stars = document.querySelectorAll('.star');
cascade(stars, {
  origin: 'center',
  step:   60,
});

Tabbed · multi-language

Same idea, three surfaces. Tabs preserve focus and announce via ARIA.

123

const root = document.documentElement;
root.style.setProperty('--accent', '#a78bfa');
// Token writes propagate everywhere.

1234

:root {
  --accent: #a78bfa;
  --bg:     #07060f;
}

<button class="lsd-btn">Press</button>
<code class="cb-inline">--accent</code>

Shell command

Single-line, no gutter — for terminal recipes.

bash

$ npx lsd init --surface galaxy --motion aurora

Usage

.cb-inline for code inside prose; .cb for framed blocks.
Copy button reads from the [data-copy] target by id, or the active tab panel.
Add .is-hl on .cb__line to highlight specific rows.
Tab panels switch via [data-tab] / [data-panel] pairs.