Component Token Index

Every component API token, collected from the /* @tui-tokens */ header each component's styles.scss maintains.

These follow the Read-Only Component API pattern: TUI never defines them, only reads them through fallback chains — so you set them to theme a component per context, from any ancestor:

.my-quiz .tui-button {
  --tui-button-radius: var(--tui-radius-full);
}

Because they're never defined by the library, they won't appear in the Primitive Token Index — absence from the emitted CSS is what makes them safely overridable.

From each component's `/* @tui-tokens */` header. Snapshot of the compiled stylesheet of @tangible/ui 0.2.29, generated at build time.

In practice

SearchInput reads --tui-search-input-button-radius for its in-field clear and submit buttons (default: --tui-radius-full). Set it from any ancestor to reshape them per context — no override of the component's own CSS, just the token:

.my-search .tui-search-input__clear,
.my-search .tui-search-input__submit {
  --tui-search-input-button-radius: var(--tui-radius-xs);
}

<div
  className="tui-interface"
  style={{ "--tui-search-input-button-radius": "var(--tui-radius-xs)", maxWidth: "22rem" }}
>
  <SearchInput defaultValue="Foundations" onSearch={() => {}} aria-label="Search courses" />
</div>

Live example: interactive page.