Install React · TUX

1. Installation

Configure your project .npmrc to resolve the @tti scope from the internal package registry:

.npmrc

@tti:registry=https://code.tti.tamu.edu/api/packages/tti/npm/

Install the package alongside React:

terminal

npm install @tti/tti-ux-react react react-dom

2. Quick Start Example

Import primitives, design token styles, and the useTuxTheme() hook directly into your components:

Dashboard.tsx

import React from "react";
import {
  TuxButton,
  TuxBadge,
  TuxAlert,
  TuxCard,
  TuxBigStat,
  useTuxTheme
} from "@tti/tti-ux-react";
import "@tti/tti-ux-react/styles.css"; // Canonical tokens + WCAG AAA reset

export default function Dashboard() {
  const { theme, toggleTheme } = useTuxTheme();

  return (
    <div className="p-8 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Research Dashboard</h1>
        <TuxButton
          shape="sharp"
          intent="secondary"
          size="sm"
          onClick={toggleTheme}
        >
          Theme: {theme}
        </TuxButton>
      </div>

      <TuxAlert variant="info" title="System Status">
        All telemetry feeds are operating under WCAG 2.2 Level AAA compliance.
      </TuxAlert>

      <TuxCard padded>
        <div className="flex items-center justify-between">
          <TuxBigStat
            value="126"
            suffix="M"
            label="Annual research expenditure"
            tone="maroon"
          />
          <TuxBadge tier="restricted" variant="solid">Restricted</TuxBadge>
        </div>
      </TuxCard>
    </div>
  );
}

3. Theme Reactivity

TUX React components automatically respond to the data-theme attribute on <html> (tti, tti-dark, tti-hc).

The useTuxTheme() hook reads from and writes to localStorage with system-preference synchronization, ensuring persistent WCAG 2.2 Level AAA compliance across page reloads.

4. Ported Component Matrix

26 Native TSX Primitives with 100% Test Coverage

Click any component to open live playground

Actions & Overlays

Sharp 0px geometry, 4 intents, 5 sizes, loading spinners

intent, shape, size, loadingTSX

Accessible menu with keyboard navigation and active link markers

label, items, to, hrefTSX

Platform-aware keyboard shortcut visual hints

value, keys, size, separatorTSX

Feedback & Status

Institutional classification badges across 4 security tiers

tier, tone, variant, dotTSX

7:1 contrast alert callouts with live ARIA announcements

variant, title, dismissibleTSX

ADR-0013 operational system status (nominal to critical)

state, kind, acked, labelTSX

Zero-data feedback states with 5 turnkey presets

kind, icon, title, descriptionTSX

Corner ribbon and banner non-production indicators

variant, kind, label, cornerTSX

Data & Telemetry

Elevation-aware container with subtle hover lift and focus rings

padded, to, href, targetTSX

Hero KPI metric displays with trend badges and maroon tones

value, label, tone, suffixTSX

TuxStatComparison

Before/after KPI comparisons with automatic delta calculation

current, previous, deltaFormatTSX

High-density multi-column statistical summary block

items, variant, columnsTSX

TuxTableCaption

Academic figure and table captions with citation metadata

number, caption, sourceTSX

Navigation & Content Structure

Turnkey two-tier institutional shell with header, hero, breadcrumbs, and footer

portalTitle, navItems, breadcrumbs, heroTSX

TuxPortalHeader

Two-tier maroon/charcoal utility bar and brand navigation ribbon

mode, portalTitle, navItems, onSearchClickTSX

TuxSidebar / TuxDocsSidebar

Collapsible hierarchical navigation sidebar with live search filter

tree, activePath, search, exclusiveTopLevelTSX

TuxSidebarBlock

Stacked sidebar module block with eyebrow, heading, and variant styling

title, eyebrow, variant, footerTSX

Hierarchical page navigation with maroon origin crumb

trail, homeIcon, chevronTSX

Accessible WAI-ARIA tabs with maroon underline indicators

items, value, onChangeTSX

Accessible disclosure groups with native details/summary

items, kind, singleTSX

Categorized resource links with external markers

groups, layout, columnsTSX

Full-width section navigation bands with tone treatments

links, tone, ariaLabelTSX

AI & Brand Primitives

TuxSpectrumRibbon

5-band institutional color bar across the TTI research spectrum

height, showLabels, interactiveTSX

TuxGroundedSources

Expandable AI citation pill strip with source verification cards

sources, title, defaultOpenTSX

Collapsible chain-of-thought reasoning trace disclosure

summary, steps, streaming, durationMsTSX

Structured AI tool invocation card with input/output inspection

name, status, input, outputTSX

Layout & Editorial

TuxSectionHeader

Editorial headings with signature 2px Warm Gold underline keyline

level, title, subtitle, kickerTSX

Editorial callout boxes with brand left-rule accents

kind, eyebrow, variantTSX

Profile identity primitive with photo and initials fallback

name, initials, photoUrl, sizeTSX

Accessible form field orchestrating label, hint, and error

label, help, hint, errorTSX

TuxDescriptionList

Semantic key-value metadata list (<dl>)

items, layout, emphasisTSX

Accessible loading placeholders with reduced-motion safety

kind, variant, animatedTSX

Syntax-highlighted code display with copy-to-clipboard

code, lang, filenameTSX