Terracotta
GitHub

Terracotta 2 for Solid 2 · release candidate

Behaviour,not decoration.

Accessible components for SolidJS that ship state, keyboard handling and ARIA wiring, and not a single pixel of style. What they are doing lands on the DOM as tc- attributes. What they look like is up to you.

Get started33 components
pnpm add terracotta@next
specimen.tsxLive

Same markup. Theme: Terracotta

01 · State

State lands in the DOM, where CSS can read it.

Terracotta never adds a class. It writes ARIA for assistive technology and a tc- attribute for your stylesheet, then gets out of the way. Use the controls on the left and watch the elements panel.

<button>
<button>
<button>
.switch[tc-checked] .switch-knob {
  translate: 0.95rem 0;
}

02 · Keyboard

Every key the pattern calls for, already wired.

Each component follows its WAI-ARIA Authoring Practices pattern: roving focus, type-ahead, Home and End, focus traps and focus return. Tab into the tree and drive it without a mouse.

  • src
    • components
    • states
    • index.ts
  • theme.css
  • package.json

FocusTab into the tree

03 · Style

Ten design systems. Not one line of markup changed.

This site is built from Terracotta, and every theme below is only a stylesheet. Pick one and the whole page, the demos included, changes with it.

04 · Catalogue

33 components, from a button to a tree grid.

Bring your own pixels.

pnpm add terracotta@next
Read the guidesGitHubClaude Code pluginTerracotta 1.x for Solid 1

MIT licensed. Built with Terracotta, styled by you.